0

I have a React application where a react-leaflet@2.7.0 + react-leaflet-draw@0.19.0 map is displaying multiple FeatureGroup components containing polygons. On the right end side of the app is a clickable list of the feature groups names. The groups can be selectively "activated" by clicking the names, so if a feature group is active, the EditControl therein is rendered. Only one group can be active at a time.

My problem

when I switch from one group to another and then click the edit button in EditControl, the onEditStart/Stop events of the previously active group still fire, along with the new ones. The more I switch between groups, the more events are fired.

Update:

The issue seems to be that EditControl is never unmounted, even if upon the parent state change it doesn't get rendered. If I add a random key prop to it, the issue is resolved, but then other issues occur.

I don't yet have a minimal code example to share, but to give you an idea of the implementation here is a schema:

<App>
   <Map>
     <MapContent id="foo">
      <FeatureGroup>
        <EditControl />
      </FeatureGroup>
     </MapContent>
     <MapContent id="bar">
      <FeatureGroup>
        <EditControl />
      </FeatureGroup>
     </MapContent>
   </Map>
   <GroupSelector />
</App>

Except App (root component), MapContent (very basic wrapper: checks if the group is active) and GroupSelector (clickable list), all other components are from react-leaflet and react-leaflet-draw.

Flow On click, GroupSelector updates the state of App to set an activeGroupID (i.e. "foo") and MapContent will render its EditControl only if its id matches the activeGroupID

I hope this description makes sense. Any help would be greatly appreciated!

Superstooge
  • 1
  • 1
  • How are you passing `activeGroupID` to `MapContent` so it can check if the `id` prop is equal to `activeGroupID? – teddybeard Oct 01 '21 at 16:32
  • @ teddybeard via props (App[state] > Map[props] > MapContent[props]). Then each `MapContent` compares them. Eventually I will implement a `MapContextProvider`, but for now I just want to make it work. – Superstooge Oct 02 '21 at 23:30

0 Answers0