React-leaflet: Popups in GeoJSON?

[adanielyan]

In Leaflet there is a way to bind a popup to each Feature polygon through onEachFeature function: http://leafletjs.com/examples/geojson.html

How can I do the same in react-leaflet using the Popup component?

[PaulLeCam]

I never tried this, but you should be able to pass the onEachFeature handler as a <GeoJson> property.

[adanielyan]

I tried the following code, and it worked fine. However it doesn't use the Popup component, but rather calls the Leaflet's bindPopup method directly:

function getGeoJSONComponent(json) {
    return(
        <GeoJson
            data={json}
            color='red'
            fillColor='green'
            weight={1}
            onEachFeature={onEachFeature} />
    );
}

function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.name) {
        layer.bindPopup(feature.properties.name);
    }
}

I am having difficulties figuring out how the onEachFeature function should be rewritten to use the react-leaflet's Popup component.

[PaulLeCam]

I suppose you could have the react-leaflet Popup rendered elsewhere and pass its instance to the layer.bindPopup(), but it is unnecessary complex, I would rather simply let the layer.bindPopup() create the Popup itself.

[adanielyan]

OK, fair enough. Thanks!

[CallumNZ]

I suppose you could have the react-leaflet Popup rendered elsewhere and pass its instance to the layer.bindPopup(), but it is unnecessary complex, I would rather simply let the layer.bindPopup() create the Popup itself.

I tried to do this but got the following error when the marker is clicked:
TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node

Here's my code:

  onEachFeature = (feature, layer) => {
    var popup = <Popup />;
    layer.bindPopup(popup);
  }

It works without using React-Leaflet components, but I want to use React Router links inside the popup, so don't really want to go down the path of not using React components. Is there a way of turning that React component instance into a Node, or am I doing something else wrong?

[MattMauser]

It seems like layer.bindPopup() can only take a string, even though in the documentation it says it can take an HTML element as well. It's unfortunate, but below is how I made it work:

layer.bindPopup(` <h5>${name}</h5> <p>${comment}</p> <p>${dateCreated}</p> `);