Changing fill values in react-leaflet during runtime

Question

Part of my program is supposed to change the color of countries on a react-leaflet map when that country name is entered into a text field. I am using GeoJSON data in the following way:

<MapContainer  style={{height: "80vh"}} zoom={2} center={[20, 100]}> 
    <GeoJSON data={mapData.features} style={this.countryStyle} ></GeoJSON>
</MapContainer>

Style is then defined as:

countryStyle(feature) {
    
    if(!(this.state.selectedCountries.get(feature.properties.ISO_A3) === undefined)) {
      console.log("We have found the candidate.")
      return {
        fillColor: "green",
        fillOpacity: 1
      };
    }

    return {
      fillColor: "black",
      fillOpacity: 0,
      color: "black",
      weight: .5
    };
  }

It returns that it has found the candidate, yet it refuses to make the changes to the style. Because the conditional is not true when the program starts, it keeps the original styling.

I originally tried putting this same conditional on the onEachFeature method, but my understanding is that that only runs once, while the style updates each render. I also tried making the original styling completely transparent in case it was just trying to override, but that didn't work either. I'm pretty new to this, so if this is entirely wrong, just let me know. Thanks!

question from:https://stackoverflow.com/questions/65835251/changing-fill-values-in-react-leaflet-during-runtime

Answer 1

Waitting for answers