Why is my react component not updating with state updates?
<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>