Add a Mapbox marker on double click event using React

Question

I'm having some difficulties making my code work. I'm working on an interactive map and I want to add a function that when users "double click" it allows them to add a marker, the function is supposed to pull the long and lat from the map itself.

I have this for the part where the function is used:

   <Map
    initialViewState={{
      center: [0,0],
      zoom: 0.7,
    }}
    style={{width: "100vw", height: "100vh"}}
    mapStyle="mapbox://styles/mapbox/streets-v11"
    mapboxAccessToken={process.env.REACT_APP_TOKEN}
    onDblClick = {handleAddClick}
>

And this is where my function is written:

  const handleAddClick = (e) =>{
    const [longitude, latitude] = e.lngLat;
    setNewIdea({
      lat: latitude,
      long: longitude,
    });
  };

This is where I call the function:

{newIdea && (
     <Popup 
    longitude={newIdea.long} 
    latitude={newIdea.lat}
    anchor="left"
    closeButton ={true}
    closeOnClick={false}
    onClose={() => setNewIdea(null)}>
      Hey
    </Popup> 
    )}
    </Map>

The app runs well but nothing happens when I double click. If I open the console in the browser I get this error every time I double click:

Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
    at handleAddClick (App.js:33:1)

Not sure what I'm doing wrong, any help would be much appreciated!

Answer 1

If the error is coming from this line:

const [longitude, latitude] = e.lngLat;

Then there is a good chance that e.lngLat is not an array as you’re expecting. Where is that field getting set? It’s likely not getting set in the way you’re expecting.