Decrement and reset
- React course
- Beginner
- Lesson 47/84
- 5 min
Add the decrement and reset buttons.
Three-button counter
Combining increment, decrement and reset gives a full counter. Three buttons side by side, the current number in the middle.
Layout: <><button>-</button><span>{count}</span><button>+</button></>. You can put the reset button below or beside.
This pattern is a small but complete example of a real UI component.
Showing the current number
We show the current number inside a <span> or <output>. The braces {count} turn the number into text and draw it.
Each click changes state, React re-renders and the span updates. This automatic flow is the heart of React.
No manual DOM updates; React handles it for you.
Practice Full counter
Complete the skeleton. Write a Counter component; import useState. Define const [count, setCount] = useState(0);. In handleUp call setCount(count + 1); in handleDown call setCount(count - 1). Return in a <>: <button onClick={handleDown}>-</button>, <span>{count}</span> and <button onClick={handleUp}>+</button>. Export it.
Starter code
import { useState } from "react";
// Define Counter hereSample solution
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
function handleUp() { setCount(count + 1); }
function handleDown() { setCount(count - 1); }
return <><button onClick={handleDown}>-</button><span>{count}</span><button onClick={handleUp}>+</button></>;
}
export default Counter;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do you return three buttons in one return?
React wants one root; a fragment adds no node.- Separated by commas
- Wrapped in a fragment Correct answer
- As an array
- In separate returns
Explanation: Wrap in a fragment <></> for one root.
2 Decrement and reset: fill in the missing part
<button onClick={handleUp}>+</button><span>____</span><button onClick={handleUp}>+</button><span>{count}</span>Explanation: You showed the number in a span.
3 Decrement and reset: match the terms
| Term | Meaning |
|---|---|
+ |
Increment |
- |
Decrement |
{count} |
Number display |
Reset |
Reset |