react-leaflet polygon eventHandler not working

Question

Simple question, I am dynamically rendering Polygons using react-leaflet.

The polygons appear as expected. However, whatever i attach to eventHandlers does not work.

  const highlightFeature = (e) => {
    console.log(e);
    let layer = e.target;
    layer.setStyle({
      color: "black",
      fillColor: "black"
    });
  };

let indents = [];
  lightRailStop.features.map((feature, index) => {
    indents.push(
      <Polygon
        positions={feature.geometry.coordinates}
        clickable={true}
        color={"red"}
        stroke={false}
        fillOpacity={0.45}

        // This is not working!
        eventHandlers={{
          mouseover: highlightFeature,
          click: () => {
            console.log("marker clicked");
          }
        }}
      />
    );
  });

Why is this so, and how do i fix it?

Full fiddle: https://codesandbox.io/s/scratchpad-without-geojson-b8jsp5

Answer 1

The sandbox you posted is using react-leaflet version 2. Version 2 handles events differently. A simple onClick prop will work. For the other handlers, you can use onMouseEnter or onMouseOut:

  <Polygon
      key={index}
      positions={feature.geometry.coordinates}
      onClick={() => console.log("this works")}
      onMouseenter={highlightFeature}
      onMouseut={(e) => console.log(e)}
    />

Working sandbox

I do recommend updating to react-leaflet v3 though.