title: Cannot find state property after ComponentDidMount()
body: <p>I want to practice my reactjs skills so I am doing some exercises with api calls to the popular openweathermap api</p>
  
  <p>I am making the api call in the componentDidMount() cycle which following the documentation <a href="https://reactjs.org/docs/faq-ajax.html" rel="nofollow noreferrer">here</a>, is the better place to make the async call</p>
  
  <p>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)</p>
  
  <p>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</p>
  
  <p>Can anyone enlighten me please? Thank you.</p>
  
  <pre><code>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 =&gt; res.json())
        .then(
          (result) =&gt; {
            this.setState({
              isLoaded: true,
              data: result
            });
          },
          (error) =&gt; {
            this.setState({
              isLoaded: true,
              error
            });
          }
        )
    }
  
    render() {        
      const { data } = this.state;   
      return(
        &lt;div&gt; 
          &lt;p&gt;This weeks forecast in {data.city.name}&lt;/p&gt;
        &lt;/div&gt;
      )
    }
  
  }
  
  export default WeekForecast;
  </code></pre>