title: React state variable is undefined inside render method
body: <p>I have a state variable <code>dataSource</code> that has some data in it.</p>
  
  <p>In a parent component I have the following:</p>
  
  <pre><code>updateFeed = newItem =&gt; {
      this.setState({ dataSource: this.state.dataSource.data.unshift(newItem) })
      console.log(this.state.dataSource.data)
    }
    render() {
      console.log(this.state.dataSource.data)
      return (
        &lt;React.Fragment&gt;
          &lt;Header /&gt;
          &lt;Route
            path="/"
            exact
            component={props =&gt; (
              &lt;Feed {...props} feedData={this.state.dataSource.data} updateFeed={this.updateFeed} /&gt;
            )}
          /&gt;
          &lt;Route path="/profile/:id" exact component={props =&gt; &lt;Profile {...props} /&gt;} /&gt;
        &lt;/React.Fragment&gt;
      )
    }
  </code></pre>
  
  <p><code>updateFeed</code> is called from the child component. </p>
  
  <pre><code>onSubmit = () =&gt; {
      const newPost = newData // some new data
      this.props.updateFeed(newPost)
    }
  </code></pre>
  
  <p>The <code>updateFeed</code> function is getting executed on submit, and the <code>console.log</code> is giving the updated data. But inside the render function <code>this.state.dataSource.data</code> is <code>undefined</code>. What am I missing here? </p>