I can't set the state in my handler function

Question

I'm trying to set a const of my state but it seems that don't work when a few days ago it worked.

I call the setter in a function like this:

const [activeMarker, setActiveMarker] = useState(null);

const handleActiveMarker = (marker) => {
  if (marker === activeMarker) {
     return;
  }
  setActiveMarker(marker);
  console.log(marker, '--', activeMarker)
};

That is called in

{markers.map(({ id, latitud, longitud}) => (
   <Marker
      key={id}
      position={{lat: latitud, lng: longitud}}
      onClick={() => handleActiveMarker(id) }
   />
))}

The attribute markers is an array of markers and it's printed well in my map, but when I click, in console.log of my handler I get the id of marker and null in activeMarker where it has to appear the same number.

Answer 1

Remember useState is asynchronous so it will not update straight away. To get the console.log value to log your value you should add a useEffect.

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