title: Style GeoJSON in react leaflet map library
body: <p>I have implemented the leaflet map library in my react project <a href="https://react-leaflet.js.org/en/" rel="nofollow noreferrer">https://react-leaflet.js.org/en/</a> and implemented a geojson map component like below</p>
  
  <pre><code>class MapContainer extends React.Component {
    state = {
      greenIcon: {
        lat: 8.3114,
        lng: 80.4037
      },
      zoom: 8
    };
  
    grenIcon = L.icon({
      iconUrl: leafGreen,
      iconSize: [24, 24], // size of the icon
      //iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
      popupAnchor: [-3, -16]
    });
  
    render() {
  
      const positionGreenIcon = [
        this.state.greenIcon.lat,
        this.state.greenIcon.lng
      ];
  
      return (
        &lt;div className="mapdata-container"&gt;
          &lt;Map className="map" style={{height:'100%',width:'100%'}} center={positionGreenIcon} zoom={this.state.zoom}&gt;
            &lt;GeoJSON data={geo}/&gt;
            &lt;Marker position={positionGreenIcon} icon={this.grenIcon}&gt;
              &lt;Popup&gt;I am a green leaf&lt;/Popup&gt;
            &lt;/Marker&gt;
          &lt;/Map&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default MapContainer;
  </code></pre>
  
  <p>It looks like this</p>
  
  <p><a href="https://i.stack.imgur.com/WKsKR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WKsKR.png" alt="enter image description here"></a></p>
  
  <p>i want to color each province with different colors and there's not alot in the documentation of how to do this.</p>
  
  <p>This is the geojson file i've used.
  <a href="https://raw.githubusercontent.com/thejeshgn/srilanka/master/electoral_districts_map/LKA_electrol_districts.geojson" rel="nofollow noreferrer">https://raw.githubusercontent.com/thejeshgn/srilanka/master/electoral_districts_map/LKA_electrol_districts.geojson</a></p>
  
  <p>How do i <code>fill</code> each province with different colors.</p>