Hi Isabella,
While it is hard to rule out modeling issues in the app, I did notice that your event handler is wrapped in a `useCallback()` react hook. This prevents the function from being redefined each render, until it detects a change in the dependencies which are given in the second argument. Can you try adding `currentData` to the array? It may be that you don't see the updated value because react is using a definition of the function of when it was last defined.
In this example the ButtonWithoutDependencies will always set the counter to the same value and log the same timestamp it received at its first render. ButtonWithDependencies however does behave as expected: Incrementing the current counter value by 1 and logging the latest timestamp.
export function App(props) {
const [counter, setCounter] = useState(0);
const timestamp = Date.now();
return (
<div className='App'>
<h1>{counter}</h1>
<h5>Clicks given</h5>
<ButtonWithDependencies
counter={counter}
setCounter={setCounter}
timestamp={timestamp}
/>
<ButtonWithoutDependencies
counter={counter}
setCounter={setCounter}
timestamp={timestamp}
/>
</div>
);
}
const ButtonWithDependencies = ({ timestamp, counter, setCounter }) => {
const incrementCounter = useCallback(() => {
console.log('With Dependencies', timestamp);
setCounter(counter + 1);
}, [timestamp, counter]);
return <button onClick={incrementCounter}>I give a click</button>;
};
const ButtonWithoutDependencies = ({ timestamp, counter, setCounter }) => {
const incrementCounter = useCallback(() => {
console.log('Without Dependencies', timestamp);
setCounter(counter + 1);
}, []);
return <button onClick={incrementCounter}>I don't give a click</button>;
};
If you find yourself running into this issue often, there is an eslint rule that will warn you when you access variables outside the scope of the useCallback that are not listed as dependencies.
On a different note, you can wrap code in code snippets to make them more readable. It is the last button on the toolbar (next to the image button).
I hope this helps,
Arjo