Dynamic Weather App In React + Typescript Project| Fetch Real Weather Data | Created From Scratch!

[@nivamaharjan3632]

did you change function currentSearchResults into currentWeatherData??

[@TSXpert]

im afraid i do not have any function named currentSearchResults , and currentWatherData is not a function but a variable which stores the response when a user search for a city
inside the function fetchWeatherData which is responsible to send the user input to the api endpoint with a search query

[@mirzyzz]

I wrote myself all code without error but still not working, i tried to use your github code but when i run your code, i am taking an 'Axios' error and it still not working, can you help me about it?

[@TSXpert]

Can you push your code to github in a public repo , so i can have a look at it ? what's the Error can you show the exact one

[@dennissolodovnik2168]

Is this only a web app, or can it be a mobile app as well

[@TSXpert]

it can definetly be converted into a native app . With React Native you just have to change arround the JSX elements names as it's lil diffrent then the web e.g
👉in ReactJs(Web version) you would write JSX as:

just red
just bigBlue
bigBlue, then red
red, then bigBlue
👉but in React Native(Mobile) it will look like this:

just red
just bigBlue
bigBlue, then red
red, then bigBlue
Hope that make sense ✌

[@Cjsmokeysaloon]

I am failing with a 404 axios error

[@Cjsmokeysaloon]

Request failed with status code 404
AxiosError: Request failed with status code 404
at settle (localhost:3000/static/js/bundle.js:221954:12)
at XMLHttpRequest.onloadend (localhost:3000/static/js/bundle.js:220636:66)

[@Cjsmokeysaloon]

I tripple checked the api_key and endpoint

[@TSXpert]

@@Cjsmokeysaloon We need to check 2 Things :
1. First your function:-
2. Second your function:-
👇
const = React.useCallback(async (lat: number, lon: number) => {
const url = `${api_Endpoint}weather?lat=${lat}&lon=${lon}&appid=${api_key}&units=metric`;
const response = await axios.get(url);
return response.data;
}, [api_Endpoint, api_key]);
👇
const fetchWeatherData = async (city: string) => {
try {
const url = `${api_Endpoint}weather?q=${city}&appid=${api_key}&units=metric`;
const searchResponse = await axios.get(url);
const currentWeatherData: WeatherDataProps = searchResponse.data;
return { currentWeatherData };
} catch (error) {
throw error;
}
};

[@TSXpert]

Here is the github repo link for the project : -
github.com/garry332212/weather-search-app/blob/main/src/componets/DisplayWeather.tsx

[@Cjsmokeysaloon]

They match the repo. I even copy and pasted from the repo
@@TSXpert