Decrement and reset

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.

Exercise 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.

Show example 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;

Test yourself

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
- As an array
- In separate returns
Show answer

Wrapped in a fragment — Wrap in a fragment <></> for one root.

Decrement and reset: fill in the missing part

<button onClick={handleUp}>+</button><span>____</span>

Show answer

<button onClick={handleUp}>+</button><span>{count}</span>

Decrement and reset: match the terms

+

Increment
-

Decrement
{count}

Number display
Reset

Reset

Next lesson: Boundary control

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies