title: Access an object inside another object returns cannot read property of undefined
body: <p>I have a trivial problem but I can't solve for some reason.</p>
  
  <p>I have an object, which is a return request from an API:</p>
  
  <pre><code>state = { 
          data: []
      }
  
      componentDidMount() {
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&amp;appid=${appkey}`)
          .then(data =&gt; data.json())
          // .then((data) =&gt; {
          //  console.log(data);
          // })
          .then(data =&gt; this.setState({data}))
  
      }
  </code></pre>
  
  <p>and:</p>
  
  <pre><code>render() {
  const weather = this.state.data
  console.log(weather.main);
  </code></pre>
  
  <p>The first part is what comes first before the react component. I was able to fetch an object and then I create a variable (const) which return another object, in this case:</p>
  
  <pre><code>{feels_like: 271.85
  temp_min: 272.15
  temp_max: 276.48
  pressure: 1027
  humidity: 97}
  </code></pre>
  
  <p>For my ignorance, the weird part is that, if I try to access for example the first value (feels_like) in this way:</p>
  
  <pre><code>weather.main.feels_like
  </code></pre>
  
  <p>it will throw an error which is Cannot read property 'feels_like' of undefined.</p>
  
  <p>Now, I tried to loop through the object but it didn't work and I tried to access the property with a different syntax but still, it threw an error.</p>
  
  <p>Am I missing something?</p>
  
  <p>The goal is to create a component like that:</p>
  
  <pre><code>console.log(this.state.data);
   const weather = this.state.data;
   return (
  
    &lt;div&gt;
    &lt;div key={weather.id}&gt;
    &lt;h3&gt;Library Product of the Week!&lt;/h3&gt;
    &lt;h4&gt;{weather.name}&lt;/h4&gt;
    &lt;h4&gt;{weather.main.temp}&lt;/h4&gt;
    &lt;h4&gt;{weather.main.feels_like}&lt;/h4&gt;
    &lt;h4&gt;{weather.main.temp_min}&lt;/h4&gt;
    &lt;h4&gt;{weather.main.temp_max}&lt;/h4&gt;
    &lt;h4&gt;{weather.main.pressure}&lt;/h4&gt;
    &lt;h4&gt;{weather.main.humidity}&lt;/h4&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>That's the entire code:</p>
  
  <pre><code>import React from 'react'
   import { render } from 'react-dom'
  
   const appkey = 'xx';
  
   class Message extends React.Component {
  
      state = { 
          data: []
      }
  
      componentDidMount() {
          fetch(`https://api.openweathermap.org/data/2.5/weather?q=Toronto,CA&amp;appid=${appkey}`)
          .then(data =&gt; data.json())
          // .then((data) =&gt; {
              //  console.log(data);
              // })
              .then(data =&gt; this.setState({data}))
  
          }
  
          componentDidUpdate() {
              console.log("The component just updated")
          }
  
          render() {
              console.log(this.state.data);
              const weather = this.state.data;
              return (
  
                  &lt;div&gt;
                  &lt;div key={weather.id}&gt;
                  &lt;h3&gt;Library Product of the Week!&lt;/h3&gt;
                  &lt;h4&gt;{weather.name}&lt;/h4&gt;
                  &lt;h4&gt;{weather.main.temp}&lt;/h4&gt;
                  &lt;h4&gt;{weather.main.feels_like}&lt;/h4&gt;
                  &lt;h4&gt;{weather.main.temp_min}&lt;/h4&gt;
                  &lt;h4&gt;{weather.main.temp_max}&lt;/h4&gt;
                  &lt;h4&gt;{weather.main.pressure}&lt;/h4&gt;
                  &lt;h4&gt;{weather.main.humidity}&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  )
          }
      }
  
      render(
          &lt;Message /&gt;, 
          document.getElementById('root')
          )
  </code></pre>