title: Checking for Undefined In React
body: <p>I have a scenario where I'm passing data from a reducer into my react state. </p>
  
  <p>data:</p>
  
  <pre><code>{
      "id": 1,
      "title": "Test",
      "content": {
          "body": "sdfsdf"
          "image": "http://example.com"
      }
  }
  </code></pre>
  
  <p>Using componentWillRecieveProps, this works perfectly for retrieving the title.</p>
  
  <pre><code>componentWillReceiveProps(nextProps) {
      this.setState({
          title: nextProps.blog.title,
      })
  }
  </code></pre>
  
  <p>However, I'm having difficulty retrieving the nested fields. When I do this:</p>
  
  <pre><code>componentWillReceiveProps(nextProps) {
      console.log("new title is", nextProps.blog.title);
      console.log("new body content is", nextProps.blog.content["body"]);
      this.setState({
          title: nextProps.blog.title,
          body: nextProps.blog.content["body"]
      })
  }
  </code></pre>
  
  <p>I get this error: </p>
  
  <p><a href="https://i.stack.imgur.com/1bsyD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1bsyD.png" alt="enter image description here"></a></p>
  
  <p>The error of an undefined body goes away after I click the debugger and the content is loaded. Is there anyway I can combat this issue? </p>
  
  <p>I tried to check for undefined like this:</p>
  
  <pre><code>if (typeof nextProps.blog.content["body"] != 'undefined'){
  </code></pre>
  
  <p>But this doesn't work either and I believe it's because the blog is undefined. </p>