Cannot read property 'temp' of undefined

Question

As a side project to learn React I chose to make a weather app. For this I went with the OpenWeatherMap API and chose the One Call API and the Geocoding API. The problem I have is that when I want to render the JSON responses I get an error: TypeError: Cannot read property 'temp' of undefined. On their documentation (OpenWeatherMap One Call API Docs) it seems that the object I need to use for temperature is current.temp but it doesn't work.

Forecast.js

function getForecast(e) {
    e.preventDefault();

    if (city.length === 0) {
        return setError(true);
    }

    // Clear state in preparation for new data
    setError(false);
    setResponseObj({});
    setLoading(true);

    const uriEncodedCity = encodeURIComponent(city);
    let KEY = process.env.REACT_APP_API_KEY
    const geoCoding = fetch(`http://api.openweathermap.org/geo/1.0/direct?q=${uriEncodedCity}&limit=1&appid=${KEY}`, {
        "method": "GET"
    })
        .then(responseGeo => responseGeo.json())

    geoCoding.then(apiCall => {
        return fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${apiCall[0].lat}&lon=${apiCall[0].lon}&units=${unit}&appid=${KEY}`)
    })
        .then(response => response.json())
        .then(response => {
            setResponseObj(response);
            setLoading(false);
        })
        .catch(err => {
            setError(true);
            setLoading(false);
            console.log(err.message);
        });
}

Conditions.js

const conditions = (props) => {
    return (
        
            {
                props.error &&  Please enter a valid city. }
            {
                props.loading && < div className={classes.Loader} />}

            {
                
                    {/* {props.responseObj.name}, {props.responseObj.sys.country} 
                         */}
                    {Math.round(props.responseObj.current.temp)}° with {props.responseObj.current.weather[0].description}. 
                    {{clothes(props.unit, Math.round(props.responseObj.current.temp))}}
                    {rain(props.responseObj.current.weather[0].description)}
                     Feels like: {(props.responseObj.current.feels_like).toFixed()}° 
                     Atmoshperic Pressure: {props.responseObj.current.pressure}hPa
                     Humidity: {props.responseObj.current.humidity}%
                     Cloudiness: {(props.responseObj.current.clouds)}% 
                     Wind: {props.responseObj.current.wind_speed} m/s, {compassSector[(props.responseObj.current.wind_deg / 22.5).toFixed(0)]}  
                     Sunrise is at: {moment.unix(props.responseObj.current.sunrise).format('HH:mm')} 
                     Sunset is at: {moment.unix(props.responseObj.current.sunset).format('HH:mm')}
                
            } 
    )
}

Edit:

The thing that I don't understand is why some of the fields from the JSON response can be rendered without any problems and some can't.

Example:

{
   "lat":47.1667,
   "lon":27.6,
   "timezone":"Europe/Bucharest",
   "timezone_offset":10800,
   "current":{
      "dt":1627819113,
      "sunrise":1627786102,
      "sunset":1627839801,
      "temp":86.52,
      ...
}

If I use props.responseObj.lat or props.responseObj.lon I get no error, but if I try to use props.responseObj.current.temp I get the TypeError: Cannot read property 'temp' of undefined error.

Drew Reese · Accepted Answer

Issue

It looks like you are accessing into an undefined property on the initial render.

In Forecast the initial responseObj state is an empty object and loading state is initially false.
{} responseObj value is passed to Conditions.
Conditions attempts to access props.responseObj.current.XXXX.

props is OFC defined, and so is props.responseObj, the value being {}. The next segment props.responseObj.current is undefined. This alone isn't an issue until you then attempt to access temp of the undefined value.

Note: This can occur any time getForecast is called since it resets the responseObj state back to an empty object ({}).

Solution

You should conditionally render the props.responseObj data if the current property exists.

const conditions = (props) => {
  return (
    
      {props.error && (
         Please enter a valid city. 
      )}

      {props.loading && }

      {props.responseObj.current && (
        
          
            {Math.round(props.responseObj.current.temp)}° with{" "}
            {props.responseObj.current.weather[0].description}.{" "}
          
          {
            
              {clothes(props.unit, Math.round(props.responseObj.current.temp))}
            
          }
          
            {rain(props.responseObj.current.weather[0].description)}
          
          
            {" "}
            Feels like:{" "}
            {props.responseObj.current.feels_like.toFixed()}° 
          
          
            {" "}
            Atmoshperic Pressure: {props.responseObj.current.pressure}hPa
          
          
            {" "}
            Humidity: {props.responseObj.current.humidity}%
          
          
            {" "}
            Cloudiness: {props.responseObj.current.clouds}% 
          
          
            {" "}
            Wind:{" "}
            
              {props.responseObj.current.wind_speed} m/s,{" "}
              {
                compassSector[
                  (props.responseObj.current.wind_deg / 22.5).toFixed(0)
                ]
              }{" "}
            {" "}
            
          
          
            {" "}
            Sunrise is at:{" "}
            
              {moment.unix(props.responseObj.current.sunrise).format("HH:mm")}{" "}
            
          
          
            {" "}
            
            Sunset is at:{" "}
            
              {moment.unix(props.responseObj.current.sunset).format("HH:mm")}
            
          
        
      )}
    
  );
};

You could also use a ternary operator on the loading state.

{props.loading ? (
  
) : (
  
    .....
  
)}

Or use Optional Chaining Operator on all the accesses.

const conditions = (props) => {
  return (
    
      {props.error && (
         Please enter a valid city. 
      )}
      
      {props.loading && }

      
        
          {Math.round(props.responseObj.current?.temp)}° with{" "} // <-- Optional Chaining
          {props.responseObj.current?.weather[0].description}.{" "} // <-- Optional Chaining
        
        {
          
            {clothes(props.unit, Math.round(props.responseObj.current?.temp))} // <-- Optional Chaining
          
        }
        
          {rain(props.responseObj.current?.weather[0].description)} // <-- Optional Chaining
        
        ...... etc....
      
    
  );
};

Cannot read property 'temp' of undefined

Edit:

Answers (1)

Issue

Solution

Related Questions

Cannot read property &#39;temp&#39; of undefined

Edit:

Answers (1)

Issue

Solution

Related Questions

Cannot read property 'temp' of undefined