Embedded Files
Often, the next value of our state is calculated using the current state. In this case, it is best practice to update state with a callback function. If we do not, we risk capturing outdated, or “stale”, state values.
Let’s take a look at the following code:
import React, { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
const increment = () => setCount(prevCount => prevCount + 1);
return (
<div>
<p>Wow, you've clicked that button: {count} times</p>
<button onClick={increment}>Click here!</button>
</div>
);
}
When the button is pressed, the increment() event handler is called. Inside of this function, we use our setCount() state setter in a new way! Because the next value of count depends on the previous value of count, we pass a callback function as the argument for setCount() instead of a value (as we’ve done in previous exercises).
setCount(prevCount => prevCount + 1)
When our state setter calls the callback function, this state setter callback function takes our previous count as an argument. The value returned by this state setter callback function is used as the next value of count (in this case prevCount + 1). Note: We can just call setCount(count +1) and it would work the same in this example… but for reasons that are out of scope for this lesson, it is safer to use the callback method. If you’d like to learn more about why the callback method is safer, this section of the docs is a great place to start.
Instructions
Instructions
1.Define a goBack() event handler. Because our next value of state depends on the previous state value, this function should call the state setter with a callback function. Our state setter callback function needs to compute the next value of questionIndex using an argument named prevQuestionIndex. Add an event listener to the “Go Back” button that will call our newly defined event handler.
2.Define a goToNext() event handler. Because our next value of state depends on the previous state value, this function should call the state setter with a callback function. Our state setter callback function needs to compute the next value of questionIndex using an argument named prevQuestionIndex. Add an event listener to the “Next Question” button that will call our newly defined event handler.
3.Add an onFirstQuestion variable with a boolean value then use that value to toggle the disabled attribute of the “Go Back” button on and off.
Page updated
Report abuse