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.

Hey, can you please provide a live [code sandbox](https://codesandbox.io) to your code. We can reproduce the error and help you better and easier — Emad Baqeri, Apr 14 '22 at 10:49

score 2 · Accepted Answer · answered Apr 14 '22 at 11:10

2

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])

answered Apr 14 '22 at 11:10

Matt

791
4
13

It returns me "null" always. – JudiithGV Apr 14 '22 at 11:24
@JudiithGV Then your Marker component does not have a correct callback for the onClick event. – Matt Apr 14 '22 at 11:33
I'm using https://codesandbox.io/s/h6vlq?file=/src/App.js this code as example and it worked, but now don't work and I didn't touch anything. – JudiithGV Apr 14 '22 at 11:43

I can't set the state in my handler function

1 Answers1