title: React not passing state to child via props
body: <p>I am trying to pass my parent <code>App</code> state to a child component <code>Chart</code>. </p>
  
  <p><strong>App</strong></p>
  
  <pre><code>constructor() {
      super();
      this.state = {
          dataPoints: {
              '424353': {
                  date: '10/10/2016',
                  qty: '95'
              },
              '535332': {
                  date: '10/11/2016',
                  qty: '98'
              },
              '3453432': {
                  date: '10/01/2017',
                  qty: '94'
              }
          }
      };
      this.addPoint = this.addPoint.bind(this);
  }
  
  addPoint(dataPoint) {
      let dataPoints = {...this.state.dataPoints};
      const timestamp = Date.now();
      dataPoints[timestamp] = dataPoint;
      this.setState({ dataPoints: dataPoints });
      console.log('new state', this.state.dataPoints);
  }
  
  render() {
      return (
          &lt;div className="app"&gt;
              &lt;Chart dataPoints={this.state.dataPoints} /&gt;
              &lt;FormControl addPoint={this.addPoint} /&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p><strong>Chart</strong></p>
  
  <pre><code>composeData() {
      Object
          .keys(this.props.dataPoints)
          .forEach(key =&gt; {
              ** do stuff **
          });
  
      return **stuff**;
  }
  
  componentWillUpdate() {
      this.composeData();
  }
  </code></pre>
  
  <p>The <code>addPoint</code> method works, i.e. I can see in the React console that the new datapoint is added to the state. But it is not reflected in the <code>Chart</code> component. More oddly (to me) is the fact that when I've added a point, the <code>console.log</code> line in my <code>addPoint</code> method (above):</p>
  
  <p><code>console.log('new state', this.state.dataPoints)</code></p>
  
  <p>does not show the new data point. </p>