title: Why is my react component not updating with state updates?
body: <p>I have a map app I built that requires some map icons to appear/disappear after a button press, but I can't figure out how to set it to re-render the component when I pass in a new sports property from it's parents component :</p>
  
  <p>Parent loads component:</p>
  
  <pre><code>&lt;SimpleMap sports=[default value and future values go here] /&gt;
  </code></pre>
  
  <p>Simple map component(simplified):</p>
  
  <pre><code>constructor(props) {
    (props);
    this.state = {
      events: [{venue: {lat: 2, lon: 1}}],
      sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"]
    };
  };
  
  componentWillReceiveProps (nextProps) {
    this.setState({events: [{venue: {lat: 2, lon: 1}}],
                    sports: nextProps.sports});
    console.log(nextProps.sports);
  }
  
  static defaultProps = {
    center: {lat: 36.160338, lng: -86.778780},
    zoom: 12,
    sports: ["baseball", "football",  "paddle", "soccer", "boxing", "dart", "biking", "golf", "hockey", "inline-skating", "tennis", "volleyball", "skateboard", "kickball", "bowling", "pool", "ride", "hike", "ice-skating"],
  };
  
  makeMapEvents (insertProps) {
    fetch("./json/meetup.json").then((response) =&gt; {
      return response.json()
    }).then((response) =&gt; {
      /* eventually returns new events object based on insertProps */
      this.setState({events: response});
    }
  };
  
  componentDidMount () {
    this.makeMapEvents(this.state.sports);
    console.log("mounted", this.state.sports);
  }
  </code></pre>
  
  <p>Eventually ends up here to map events from state:</p>
  
  <pre><code>&lt;GoogleMap&gt;
    {this.state.events.map((result) =&gt; {
       return (&lt;Marker key={counter++} lat={result.venue.lat} lng={result.venue.lon} 
                  sport={this.props.sport} data={result}/&gt;);
    })}
  &lt;/GoogleMap&gt;
  </code></pre>