title: An object within an object in React state returns undefined
body: <p>There is something that I just can't figure out. Here is a basic React class-based component fetching some data from an endpoint:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  class Example extends React.Component {
    state = { info: {} };
  
    componentDidMount() {
      fetch('https://api.spacexdata.com/v2/info')
        .then(response =&gt; response.json())
        .then(data =&gt; {
          const info = data;
          this.setState(() =&gt; ({ info }));
        });
    }
  
    render() {
      return (
        &lt;div&gt;
          {/* the first h1 renders just fine */}
          &lt;h1&gt;{this.state.info.name}&lt;/h1&gt;
          {/* the second throws an error: Cannot read property 'address' of undefined */}
          &lt;h1&gt;{this.state.info.headquarters.address}&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Example /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>Why is the second h1 tag giving me undefined??? I check the state in the react dev tools and the data is there... It is literally an object that has another object within it... If I copy paste that same object into the state it renders just fine...</p>