Back

Technologies:

javascriptjavascript
htmlhtml
csscss
reactjsreactjs
avatar
Tolerim
13 days ago

In the React Weather App, I am receiving an error message saying that I am unable to read the properties of 'temp' because it is undefined.

I'm developing a weather app with a dynamic background that changes based on the temperature of the targeted city using a changing ClassName.

Initially, everything works perfectly; however, when I reload the page with an F5 key and enter a city in the input, I encounter this error:

Cannot read properties of undefined (reading 'temp')

As a result of this TypeError: Cannot read properties of undefined (reading 'temp'), the error window pops up; however, if I close the window, the page works flawlessly, changing cities and backgrounds.

Does anyone know how to resolve this issue? Despite modifying the code, I am unable to make the error window disappear when the user enters the first city input. Nonetheless, everything else works perfectly.

Answers(2)
avatar
Vogi
12 days ago
Verified Answer
The error message "Cannot read properties of undefined (reading 'temp')" is caused by trying to access the property main.temp from an empty string value of weather. You can solve this by using conditional rendering by showing the list only when weather is not empty. Another solution is to initialize the weather state with an empty object instead of undefined. In both cases, you should also update the handleSearch() function to properly set the weather state with the search query instead of trying to set it directly to an object with a q property. I hope this helps! Let me know if you have any other questions.

Sources

Cannot read property "temp" of undefined - Stack OverflowReact Typescript: Cannot read properties of undefined (reading 'name ...Cannot read properties of undefined (reading 'temp') with React Weather App
avatar
Tolerim
13 days ago
It looks like the error is caused by trying to access the temp property of an undefined value in your code. This might be because the data variable is undefined when your code runs initially. One way to fix this is to make sure that the data variable is defined before you try to access its properties. You can do this by checking if data is undefined before accessing its properties, like this: 
if (typeof data !== 'undefined' && typeof data.main !== 'undefined' && typeof data.main.temp !== 'undefined') {
  // your code that uses data.main.temp goes here
}
This code checks if data, data.main, and data.main.temp are all defined before using the temp property. If any of these are undefined, the code inside the if statement won't run. You can also simplify your ternary expression that sets the className of the app element. Here's an example of how you can do this: 
const appClass = data && data.main && data.main.temp ? 'app warm' : 'app';
document.querySelector('.app').className = appClass;
This code sets the appClass variable to 'app warm' if data.main.temp is defined, and 'app' otherwise. It then finds the app element using querySelector and sets its className to the value of appClass.
;