Ok, here's a closure issue (i think) that I'm dealing with. Can't wrap my head around it. I have a component and I'm trying to get the updated value of shouldDropAbove
into my callback onStepItemDrop
:
export const StepItem = () => {
const [shouldDropAbove, setShouldDropAbove] = React.useState<boolean>()
React.useEffect(() => {
console.log(shouldDropAbove) //outputs updated value correctly
}, [shouldDropAbove])
console.log(shouldDropAbove) //also is outputting the updated value correctly
const onStepItemDrop = (draggingStep) => {
console.log(shouldDropAbove) //outputting undefined ?????
}
return (
<Droppable
onDrop={onStepItemDrop}
setShouldDropAbove={setShouldDropAbove} //Droppable updates setShouldDropAbove correctly
>
{jsx stuff}
</Droppable>
)
}
export const Droppable = ({onDrop, setShouldDropAbove}) => {
//updating setShouldDropAbove
}
What is going on here and why can't I get the correct value in the callback?