setting state doesn't work properly when trying to set coordinates

Question

function MyMap({ floorsByBuilding }: MyMapProps) {
  const [coords, setCoords] = useState<any[]>([]);

  const created = (e) => {
    const coordsList = e.layer.editing.latlngs[0][0];
    console.log("coordsList:", coordsList);
    setCoords(coordsList);
    console.log("Coords:",coords);
  };

  return (
    <div className="mapview">
      <div className="myMap">
        <Map center={[0, 0]} zoom={1}>
          <FeatureGroup>
            <EditControl
              position="topright"
              draw={{
                rectangle: false,
                circle: false,
                circlemarker: false,
                polyline: false,
              }}
              onCreated={created}
            />
          </FeatureGroup>
        </Map>
      </div>
    </div>
  );
}

e.layer.editing.latlngs[0][0] looks like,

[
   {
      "lat":32.29840589562344,
      "lng":80.85780182804785
   },
   {
      "lat":17.421213563227735,
      "lng":78.36653079164644
   },
   {
      "lat":23.02755815843566,
      "lng":107.33497479055386
   },
   {
      "lat":41.49329414356384,
      "lng":104.47883340910323
   },
   {
      "lat":39.47390998063457,
      "lng":82.8312041405605
   }
]

The EditControl is react-leaflet-draw component that helps to annotate in an image or map, from where we get coordinates (the above data) which is e.layer.editing.latlngs[0][0]. After getting the coordinates, i'm trying to store those coordinates into a state (which is setCoords) so that i can use those coordinates elsewhere.

The issue here is, after obtaining the coordsList for the first time, the setCoords doesn't actually set those coords ( the second console.log returns empty array, even if the first console.log does return desired output). But when i'm trying the second time, i.e a new coordList values are obtain, the setCoords sets the data of the pervious coordsList (the first console.log return the coordsList correctly but the second console.log return previous data of coordsList).

Screenshots for more clarity,

First time when I get coordsList,

Second time,

Answer 1

Because state only has new value when component re render. So you should move console.log to useEffect to check the new value when component re-render.

const created = (e) => {
  const coordsList = e.layer.editing.latlngs[0][0];
  console.log("coordsList:", coordsList);
  setCoords(coordsList);
};

useEffect(() => {
  console.log("Coords:", coords);
}, [coords]);