title: React props object data is undefined
body: <p>I'm passing an object as a prop to a component.</p>
  
  <pre><code>&lt;SomeComponent myData={props.myData}&gt;...&lt;/SomeComponent&gt;
  </code></pre>
  
  <p>In <code>SomeComponent</code>, when I <code>console.log</code> <code>this.props.myData</code>, it is <em>not</em> undefined and contains <code>key/val</code> pairs, as expected.</p>
  
  <pre><code>constructor(props) {
    super(props);
    console.log(this.props.myData);
    …
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/rvNQg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rvNQg.png" alt="enter image description here"></a></p>
  
  <p>However, when I try to access any one of this object's properties, they are all <code>undefined</code>.</p>
  
  <pre><code>constructor(props) {
    super(props);
    console.log(this.props.myData.title); // undefined
    …
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>The following <em>does</em> output the value, but I'm unclear as to why, since the object is already available without <code>setTimeout</code>.</p>
  
  <pre><code>constructor(props) {
    super(props);
    setTimeout(() =&gt; {
      console.log(this.props.fightData.title); // "Work plain near killed us both"
    });
    …
  }
  </code></pre>