title: How can I refresh GeoJSON choropleth using onEachCountry in React Leaflet?
body: <p>I'm new to JS, React and Leaflet but I think I've managed okay so far.
  I have a choropleth displaying coffee information correctly. Unfortunately when I change the data within onEachCountry the changes are not reflected as this is not a state. Maybe I can somehow make each layer within the onEachCountry loop, a state? Or is there some easy refresh option I can call in the JSX maybe?</p>
  <p>I've tried to use the useEffect for onEachCountry, I've tried console logs too and the data IS being updated, just not displayed. Other leaflet hooks seem to update more easily when changed.</p>
  <p>Any help greatly appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from "react";
  import { MapContainer, GeoJSON, TileLayer } from "react-leaflet";
  import "leaflet/dist/leaflet.css";
  import "./ChoroMap.css";
  import NavBarCountry from "../NavBarCountry";
  
  // from Choro
  const ChoroMap = ({ countries, coffees, onChangeLegend }) =&gt; {
    const [selectedStat, setSelectedStat] = useState("Producers");
  
    useEffect(() =&gt; {
      onEachCountry();
    }, [selectedStat]);
  
    const onProducersClick = function () {
      onChangeLegend("Producers");
      setSelectedStat("Producers");
    };
  
    const onExportersClick = function () {
      onChangeLegend("Exporters");
      setSelectedStat("Exporters");
    };
  
    const onFarmsClick = function () {
      onChangeLegend("Farms");
      setSelectedStat("Farms");
    };
  
  
    function legend(stat, comparisonArray) {
      if (stat &gt;= comparisonArray[0]) {
        return "#741f1f";
      } else if (stat &gt;= comparisonArray[1] &amp;&amp; stat &lt; comparisonArray[0]) {
        return "#9c2929";
      } else if (stat &gt;= comparisonArray[2] &amp;&amp; stat &lt; comparisonArray[1]) {
        return "#d75e5e";
      } else if (stat &gt;= comparisonArray[3] &amp;&amp; stat &lt; comparisonArray[2]) {
        return "#c57979";
      } else if (stat &gt;= 0 &amp;&amp; stat &lt; comparisonArray[3]) {
        return "#f1b1b1";
      }
    }
  
    function stripNumber(numberString) {
      const number = Number(numberString.replace(/[^\d.-]/g, ""));
      return number;
    }
  
  const onEachCountry = (country, layer) =&gt; {
  if (country) {
    // defaults
    layer.options.fillOpacity = 1;
    layer.options.weight = 0.6;
    layer.options.color = "white";
  
        // country name from JSON
        const name = country.properties.ADMIN;
  
        const countryObj = coffees.find((coffee) =&gt; coffee.country === 
  name);
        if (countryObj != null) {
          if ((selectedStat == "Producers")) {
            layer.bindPopup(`${name} 
  ${countryObj.production_volume}`);
            const productionVol = 
  stripNumber(countryObj.production_volume);
            const foundColor = legend(
              productionVol,
              [10_000_000, 5_000_000, 2_000_000, 500_000]
            );
            layer.options.fillColor = foundColor;
          }
          else if ((selectedStat == "Exporters")) {
              layer.bindPopup(`${name} ${countryObj.export_volume}`);
              const exportVol = stripNumber(countryObj.export_volume);
              const foundColor = legend(
                exportVol,
                [10_000_000, 5_000_000, 2_000_000, 500_000]
              );
              layer.options.fillColor = foundColor;
            }
          else if ((selectedStat == "Farms")) {
          layer.bindPopup(`${name} ${countryObj.number_of_farms}`);
          const numberOfFarms = 
  stripNumber(countryObj.number_of_farms);
          const foundColor = legend(
              numberOfFarms,
              [5, 10, 15, 20]
          );
          layer.options.fillColor = foundColor;
          }
          console.log('onEachCountry', layer.options.fillColor)
        }
      }
    };
  
    return (
      &lt;div&gt;
        &lt;NavBarCountry
          onProducersClick={onProducersClick}
          onExportersClick={onExportersClick}
          onFarmsClick={onFarmsClick}
        /&gt;
        &lt;MapContainer
          className="map"
          attributionControl={false}
          zoom={2.5}
          center={[10, 10]}
        &gt;
          
          &lt;GeoJSON data={countries} onEachFeature={onEachCountry}/&gt;
        &lt;/MapContainer&gt;
      &lt;/div&gt;
    );
  };
  
  export default ChoroMap;</code></pre>
  </div>
  </div>
  </p>