javascript - Why can't I read a component's state inside a DropEvent callback function?

Question

I'm having trouble understanding why I cannot read a component's state variable inside of a marker drop callback function on a map component.

Inside my component I initialise this state as null

const [testBool, setTestBool] = useState(null);

I declared a function to handle the state change

const testFunc = () => {
  setTestBool(true);
}

and the callback function that gets executed after a marker has been dropped on a map component

const handleMarkerDrop = e => {
  console.log('test bool', testBool);
}

Inside my render I put a button to execute testFunc and the map component

<button onClick={testFunc}>set to true</button>
  <SomeKindOfMapComponent
     // other props here
     onMarkerDrop={handleMarkerDrop} />

When I click the button the state gets updated (I can console log it as true before the return) but when I perform a marker drop and the handleMarkerDrop function gets executed, testBool is read as null

I also tried workarounds like passing the prop as {e => handleMarkerDrop(e, testBool)} but still doesn't work as I would expect

question from:https://stackoverflow.com/questions/66066260/why-cant-i-read-a-components-state-inside-a-dropevent-callback-function

Answer 1

Waitting for answers