Determine Place Error

I am using MapBox and I want to select a point by double click and get the coordinates as a piece of state but I get the error.

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

I want my variable newPlace to be an object with those coordinates.

function MapPage() {
const [newPlace, setNewPlace] = useState(null);
const [viewport, setViewport] = useState({
    latitude: 45,
    longitude: 15,
    zoom: 4,
  });

  const handleMarkerClick = (id, lat, long) => {
    setCurrentPlaceId(id);
    setViewport({ ...viewport, latitude: lat, longitude: long });
  };

  const handleAddClick = (e) => {
    try {
    const [long, lat] = e.lngLat;
    setNewPlace({
      lat,
      long,
    });
  } catch (err) {
    console.log(`this is the error: ${err}`);
    //gives me null
    console.log(newPlace);
   //gives me coordinates lat, long
    console.log(e.lngLat);
  }
  };

return (
<Map
  {...viewport}
  mapboxAccessToken={process.env.REACT_APP_MAPBOX}
  width="100%"
  height="100%"
  transitionDuration="200"
  mapStyle="mapbox://styles/mapbox/streets-v9"
  onViewportChange={(viewport) => setViewport(viewport)}
  scrollZoom="true"
  onDblClick={handleAddClick}
>
</Map>
)
}

I am still confused on how to solve the issue I added more information so help is more likely.

Without a working example, or knowing which dependencies you are using, or how it all fits together, it is kind of hard to help.

Are you sure the event object has that property on it? Wouldn’t it be the target of the event?

Thanks for your feedback, the dependancy I am using here is called react-map-gl. With that I can import a Map module. I think the event property has the property because it gives me the coordinates (lat,long) but I just can’t set my newPlace of state with it.

The error you are getting is usually from looping or spreading incorrectly.

What is the type of lngLat is it an array or an object?

As for newPlace being null you shouldn’t log state changes as you are. I’d suggest creating a useEffect to log the state.

useEffect(() => {
  console.log(newPlace);
}, [newPlace]);

lngLat originally is an array with lat and long but when it is set it should be an object which is what e.lngLat is.

I logged the useEffect and newPlace is null like it is supposed to be initially.

const [newPlace, setNewPlace] = useState(null);

I don’t understand, is lngLat an object or not?

const lngLat = {
  lat: 123,
  long: 456,
};

// object is not iterable (cannot read property Symbol(Symbol.iterator))
const [lat, long] = lngLat;

const { lat, long } = lngLat;
console.log(lat, long); // 123 456

When I log lngLat I get it as an object. This is documentation about it.

Still confused as to how to set the state of newPlace to the latitude and longitude.

You do understand the difference between object and array destructuring?

If it’s an object you can’t do array destructuring, that’s my point. You need to use an object.

const { long, lat } = e.lngLat;

Appreciate the resource but I was able to solve the issue by using the method .toArray() on e.lngLat.

What is the point of calling a method on the object when you can just use object destructuring?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.