Number and buttons

Add the number display and the increment button.

Decrement and reset

To decrease the counter call setCount(count - 1); to reset call setCount(0). Each gets its own handler and button.

You place two buttons side by side: one "−1", one "Reset". Each button calls its own handler.

This pattern shows how one component manages several interactions.

Two buttons side by side

You return the decrement and reset buttons together as sibling JSX in one return. React wants a single root; you wrap two siblings in a <div> or a <> fragment.

A fragment <>...</> groups without adding a DOM node; we cover it in detail later.

Each button gets its own onClick; handlers live in the component.

Exercise Decrement and reset

Complete the skeleton. Write a Counter component; import useState. Define const [count, setCount] = useState(0);. In handleDown call setCount(count - 1); in handleReset call setCount(0). Return two buttons in a <>: <button onClick={handleDown}>-</button> and <button onClick={handleReset}>Reset</button>. Export it.

Show example solution

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  function handleDown() { setCount(count - 1); }
  function handleReset() { setCount(0); }
  return <><button onClick={handleDown}>-</button><button onClick={handleReset}>Reset</button></>;
}

export default Counter;

Test yourself

Which call resets?
```
The updater can be called with a constant.
```
- setCount(0)
- setCount(count)
- count = 0
- reset()
Show answer

setCount(0) — setCount(0) brings the number back to start.

Number and buttons: fill in the missing part

function handleDown() { setCount(____); }

Show answer

function handleDown() { setCount(count - 1); }

Number and buttons: match the terms

handleDown

Decrement
handleReset

Reset
setCount(0)

Zero
<>...</>

Fragment

Next lesson: Decrement and reset

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies