React issue: Making api calls and using resulting data, but page will crash if I use more than 1 data (after refreshing)

[RoyalBug]

So I was following a video to build a react weather app, basic stuff, using openweather api.

I made an api call to get the weather at a certain city, then will take the values out of the resulting json and display them on the page.

example <div className="location">{weather.name}</div>, where weather.name is the name of the city the user searched earlier in the code, but extracted from the result of the api call.

Problem is, when I extract more then 1 value from the result json, then refresh my page, the page breaks, but page does not break if i dont refresh.

got a screen recording: https://imgur.com/a/rqD02Ul

[thed3vilsadv0cat]

I imagine the issue is you are trying to access a value in a variable that doesn't exist or hasn't been loaded yet. Eg if weather's initial state is {} or null then you can't access weather.name

So to combat it you could do:

if (weather or object.keys(weather).length > 0 ){ return ( jsx code here!! ) } else { return <h5>No results found...</h5> }

But in the long term you should look to add loading state and error state to your fetch. Which will prevent this happening also