Checking for Undefined In React
<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>