title: React componentWillReceiveProps not updating state
body: <p>I've got this React parent component here. The children components at this point are just returning dropdown menus. I expected that componentWillReceiveProps would update the state here, which in turn should be passed to StopList as props. However, when state.selectedSub is changed through handleSubSelect, nothing happens and StopList doesn't receive any props. </p>
  
  <p>Is my mistake with the asynchronous nature of componentWillReceiveProps? Is it in the wrong place in my code? Am I using the wrong lifecycle method? </p>
  
  <pre><code>// We're controlling all of our state here and using children
  // components only to return lists and handle AJAX calls.
  
  import React, { Component } from 'react';
  import SubList from './SubList';
  import StopList from './StopList';
  
  class SubCheck extends Component {
  
    constructor (props) {
      super(props);
      this.state = {
          selectedSub: '--',
          selectedStop: null,
          stops: ['--'],
      };
      this.handleSubSelect.bind(this);
      this.handleStopSelect.bind(this);
      }
  
      // We want the user to be able to select their specific subway
      // stop, so obviously a different array of stops needs to be 
      // loaded for each subway. We're getting those from utils/stops.json.
      componentWillReceiveProps(nextProps) {
          var stopData = require('../utils/stops');
          var stopsArray = [];
          var newSub = nextProps.selectedSub
          for(var i = 0; i &lt; stopData.length; i++) {
              var stop = stopData[i];
  
              if (stop.stop_id.charAt(0) === this.state.selectedSub) {
                  stopsArray.push(stop.stop_name);
              }
          }
          if (stopsArray.length !== 0 &amp;&amp; newSub !== this.state.selectedSub) {
              this.setState({stops: stopsArray});
          }
      }
  
      handleSubSelect(event) {
          this.setState({selectedSub:event.target.selectedSub});
      }
  
      handleStopSelect(event) {
          this.setState({selectedStop:event.target.selectedStop})
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;SubList onSubSelect={this.handleSubSelect.bind(this)}/&gt;
                  &lt;StopList stops={this.state.stops} onStopSelect={this.handleStopSelect.bind(this)}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default SubCheck;
  </code></pre>