React-leaflet how to resetStyle
The solution was to access the leafletElement of geojson which has resetStyle
resetHighlight(e) { this.refs.geojson.leafletElement.resetStyle(e.target);}
react-leaflet-choropleth is a way to handle choropleth if you are not wanting to write it from scratch. It is based off of the leaflet-choropleth plugin
import Choropleth from 'react-leaflet-choropleth'import { Map } from 'react-leaflet'const style = { fillColor: '#F28F3B', //default color filll weight: 2, //normal styling opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.5}const map = (geojson) => ( <Map> <Choropleth data={{type: 'FeatureCollection', features: geojson} /*feature collection or array*/} valueProperty={(feature) => feature.properties.value /*value for choropleth*/} visible={(feature) => feature.id !== active.id /*use choropleth color?*/} scale={['#b3cde0', '#011f4b'] /*color range*/} steps={7 /*how many different colors to use?*/} mode={'e' /*use equadistance mode, others include kmeans and quantile*/} style={style} onEachFeature={(feature, layer) => layer.bindPopup(feature.properties.label)} ref={(el) => this.choropleth = el.leafletElement /*get the geojson's layer container*/} /> </Map>)ReactDom.render(<map geojson={...} />, document.body)