const _markers = floorEntities.map((floorEntity) => {
return L.marker(floorEntity.latlng, {
icon: getFloorEntityLeafletIcon(floorEntity),
draggable: true,
}).bindPopup(
ReactDOMServer.renderToString(
<Popup
ref={ref}
name={floorEntity.name}
location={floorEntity.location}
onClick={() => deleteMarker(floorEntity.id)}
/>
)
);
});
The component has a prop called onClick which waits for a delete method, but the event wont go since we are using renderToString method which returns a dry HTML, is there any way to make onClick event get sent
Thanks.
If you use the and components instead of creating the marker with L then you do not have to use ReactDOMServer.renderToString for the popup.
import { Marker, Popup } from "react-leaflet";
const _markers = floorEntities.map((floorEntity) => {
return (
<Marker key={floorEntity.id} icon={getFloorEntityLeafletIcon(floorEntity)} draggable>
<Popup
ref={ref}
location={floorEntity.location}
onClick={() => deleteMarker(floorEntity.id)}
/>
Your content here :)
</Marker>
)