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
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)}
/>
I do recommend updating to react-leaflet v3 though.