React-leaflet: How to update bound popup text on geojson features after state change?

[davidascher]

Please make sure to check the following boxes before submitting an issue. Thanks!

• [x] Check that all peer dependencies are installed: React, ReactDOM and Leaflet.
• [x] Check that you are using a supported version of React (v0.14 or v15).
• [x] Check that you are using a supported version of Leaflet (v.0.7)
• [x] Make sure you have followed the quick start guide for Leaflet.
• [x] Make sure you have fully read the documentation and that you understand the technical considerations.

Expected behavior

I have a choropleth map which uses a geojson dataset to divide up the world, and colorize each feature based on data obtained through an async ajax call to a database.

When the component state is updated, the choropleth coloring is updated, but the text in the popups isn't.

I believe this is because the code:

      <Choropleth
        data={geojson}
        valueProperty={this.numCasesPerCountry}
        scale={scale}
        visible={this.isCountryListed}
        onEachFeature={(feature, layer) => layer.bindPopup(this.labelPerCountry(feature))}
        steps={5}
        mode='e'
        style={style}
      />

determines the text in the popups at initial rendering time, and the onEachFeature code isn't updated on state changes.

Actual behavior

Even though the data gets processed and the colors change, the popup labels don't change (and the labelPerCountry callback mentioned above is only called on initial render:

Note that the labelPerCountry callback is only called on initial render.

Steps to reproduce

(I can't find a trivial geojson sample, sorry).

What's your advice for dynamically updating the 'bound' popups on geojson features?

[davidascher]

Apologies for the noise.

Fixed it, by using code like:

  onEachFeature(feature, layer) {
    let labelPerCountry = this.labelPerCountry;
    layer.on({
      click: function(event) {
        var popup = L.popup()
            .setLatLng(event.latlng)
            .setContent(labelPerCountry(feature))
            .openOn(layer._map);

          }
    });
  }

and:

      <Choropleth
        data={geojson}
        valueProperty={this.numCasesPerCountry}
        scale={scale}
        visible={this.isCountryListed}
        onEachFeature={this.onEachFeature}
        steps={5}
        mode='e'
        style={style}
      />