title: React-Leaflet change GEOJSON shape color by state change
body: <p>Through an API call, I get GEOJSON data (points) . I immediately display that data in the leaflet map by using circleMaker and display them all to be one color. I then give the user the option to slide a slider ( triggers action with payload being the slider value/location). What I want to do is change the color of some circles ( i.e one those who have an attribute that is lower that the slider value). How can I do this without re-rendering all circles? </p>
  
  <p><em>Example: ( all circles are green and slider value is at 0, I then change the slider to 4 and all the circles  that have a value (that I get from the GEOJSON features) lower than 4 ( slider value) change color to red, and the rest stay the same.</em></p>
  
  <p>Sample Code:
  I have a GEOJSON component:</p>
  
  <pre><code> &lt;GeoJSON
    key={_.uniqueId()}
    data= {this.props.countrySelected.geojson}
    pointToLayer={this.pointToLayer.bind(this)}
    &gt;&lt;/GeoJSON&gt;
  </code></pre>
  
  <p>^ The data is a GEOJSON object with all points that have a feature of lets say "score" </p>
  
  <p>Here is pointToLayer:</p>
  
  <pre><code>pointToLayer = (feature, latlng) =&gt; {
  return L.circleMarker(latlng, {
    color: '#228B22',
    fillColor: '#228B22',
    fillOpacity: .6,
    radius: 3
  }).bindPopup(popUpString(feature.properties)); 
  }
  </code></pre>
  
  <p>In another component I have a slider that calls handleChange everytime it is changed:</p>
  
  <pre><code>handleChange = (value) =&gt; {
  this.props.sliderChanged(value);
  }
  </code></pre>
  
  <p>This then triggers an action, that then triggers a reducer that makes the adequate changes to the state ( i.e. it makes the state slider value change to the value in the slider that the user just changed.</p>