Cannot find state property after ComponentDidMount() - reactjs

Question

I want to practice my reactjs skills so I am doing some exercises with api calls to the popular openweathermap api
I am making the api call in the componentDidMount() cycle which following the documentation here, is the better place to make the async call
If I console.log(data) in render I first get undefined then I get the object that I need; but if I try to access said object with {data.city.name} which does exist I get the error "TypeError: Cannot read property 'name' of undefined" on the second re-render (componentDidMount() forces a second render)
I do not know what I am missing, I am not that experienced with lifecycles but it is pretty straightforward, I do not understand why this is happening
Can anyone enlighten me please? Thank you.
import React from 'react';
class WeekForecast extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
data: {}
};
}
componentDidMount() {
fetch([url])
.then(res => res.json())
.then(
(result) => {
this.setState({
isLoaded: true,
data: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { data } = this.state;
return(
<div>
<p>This weeks forecast in {data.city.name}</p>
</div>
)
}
}
export default WeekForecast;

Answer 1

You are seeing this error because you are trying to get a property from an object which is undefined. If you try to log a property which is undefined at that time is not a problem, but if you try to get a property from this undefined object then you get an error.
const data = {};
console.log( "city is", data.city );
console.log( "city name is", data.city.name );
Here is another example. What if we don't define an empty object for data? You are defining one in your state, but what if we don't?
//const data = {};
console.log( "city is", data.city );
console.log( "city name is", data.city.name );
Here since data is not defined, we can't get the city as undefined.
In your situation, data is defined in your state as an empty object. So, trying to log the city returns an undefined, but trying to log city.name returns error.
Because your data is landing in your component after the first render you should check you have it with a conditional rendering. You will use this all the time when you are dealing with the data which is coming from a remote place. There are many ways doing the conditional rendering. Here is one of them:
renderHelper() {
const { data } = this.state;
if ( !data.city ) { return <p>Loading data...</p>}
return <p>This weeks forecast in {data.city.name}</p>
}
render() {
return (
<div>
{ this.renderHelper() }
</div>
)
}

Answer 2

Hope the below snippet helps.
Couple of issues.
The Promise handle was misused.
Handling the data on the firs render (data validation before operating).
class WeekForecast extends React.Component {
constructor(props) {
super(props);
this.state = {
error: null,
isLoaded: false,
data: {}
};
}
fetch = () => Promise.resolve({city:{name:"New York City"}})
componentDidMount() {
this.fetch()
.then(
(result) => {
this.setState({
isLoaded: true,
data: result
});
},
(error) => {
this.setState({
isLoaded: true,
error
});
}
)
}
render() {
const { data } = this.state;
return(
<div>
<p>This weeks forecast in {data.city && data.city.name || 'No City'}</p>
</div>
)
}
}
ReactDOM.render(<WeekForecast />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>