Change region color on click (react-simple-maps)

Question

I'm using react simple maps. I created a US map and I need to change the color of the state on click. I can change it by adding a press style prop to the Geography component but the color gets back to the default color when the click event is ended. Is there a way to keep that clicked color persistent?

Answer 1

You have to store the clickedCity and after check like this

  const [clickedCity, setClickedCity] = useState("");
  const handleClick = (geo) => {
    setClickedCity(geo.properties.name);
    dispatcher(getState({ value: geo.properties.name }));
    history.push({
      pathname: "/issues",
      state: { states: geo.properties.name },
    });
  };
           
 <Geographies geography={TUNISIA_TOPO_JSON}>
          {({ geographies }) =>
            geographies.map((geo) => {
              const isClicked = clickedCity === geo.properties.name;
              return (
                <Geography
                  key={geo.rsmKey}
                  geography={geo}
                  fill={isClicked ? "blue" : "red"}
                  stroke="#88c399"
                  strokeWidth="4"
                  onMouseEnter={onMouseEnter(geo, current)}
                  onMouseLeave={onMouseLeave}
                  onClick={() => handleClick(geo)}
                  style={{...}}
                />
              );
            })
          }
</Geographies>