after hiding and showing the component multiple times it will execute onDrawCreate multiple times

[johhansantana]

I'm trying to hide the controls until the user presses a button to add points to the map.

At first just doing:

{mapIsEditable &&
<DrawControl
  ref={drawControl}
  controls={{
    point: true,
    polygon: true,
    trash: true
  }}
  onDrawCreate={({ features }) => {
    console.log('FEATURES: ', features)
  }
  ...
/>;
}

seemed to work well until I try to toggle the controls multiple times, then the onDrawCreate gets executed the same amount of times I toggled the component.

I've tried using:

<DrawControl
  ref={drawControl}
  controls={{
    point: props.mapIsEditable,
    polygon: props.mapIsEditable,
    trash: props.mapIsEditable
  }}
  ...
/>;

But this way the controls never show up when I toggle the prop.

Is there a way to toggle these or fix this error?

[Azerothian]

https://gist.github.com/Azerothian/be9d75f569a89ecd7e5ba5f25a1cb0f4

This works

[amaury1093]

@Azerothian that's a good idea! Do you want to create a PR with your modifications?