title: TypeError: Cannot read property 'firstName' of undefined - using 'props' in react
body: <p>I am currently learning React and have hit a problem.</p>
  
  <p>I retrieve a list of JSON information relating to documents which I then pass the <code>json</code> as <code>props</code> into the following <code>const</code>:</p>
  
  <pre><code>const Document = props =&gt; {
    console.log(JSON.stringify(props));
    return(
      &lt;div className="row"&gt;
        &lt;div className="col-3"&gt;{props.dateOnLetter}&lt;/div&gt;
        &lt;div className="col-1"&gt;{props.personFrom.firstName}&lt;/div&gt;
        &lt;div className="col-1"&gt;{props.personFrom.lastName}&lt;/div&gt;
        &lt;div className="col-1"&gt;{props.personTo.firstName}&lt;/div&gt;
        &lt;div className="col-1"&gt;{props.personTo.lastName}&lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>The JSON looks like this:</p>
  
  <pre><code>{
      "dateOnLetter":"2012-04-23T18:25:43.511+0000",
      "personFrom":{
          "id":"5b637d319e30ed3f8c322c64",
          "firstName":"Georgexxx",
          "lastName":"TheCatxxx"
      }
  }
  </code></pre>
  
  <p>It complains that the personTo attribute doesnt exist; however the reason I want to include it is that it may exist in some rows.</p>
  
  <p>It complains about the line:</p>
  
  <pre><code>&lt;div className="col-1"&gt;{props.personTo.firstName}&lt;/div&gt;
  </code></pre>
  
  <p>The error is:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'firstName' of undefined - using 'props' in react </p>
  </blockquote>
  
  <p>So, any idea how I can solve this elegantly?</p>