Project: Counter app

Review the goal and steps of the counter app project.

Project: Counter app

In this project we build an interactive counter. Three steps: a button showing the number, decrement and reset, then a 0–10 range clamp.

Each lesson builds on the previous; we use state and events together. This is the natural application of the useState group.

First we lay out the skeleton and the state.

Increment button

The counter state is count, the updater setCount. The increment button calls setCount(count + 1) via onClick.

The button text shows the current number: <button onClick={handleUp}>{count}</button>. Each click re-renders and the new number appears.

This is the smallest example of state + events combined.

Exercise Counter skeleton

Complete the skeleton. Write a Counter component; import useState. Define const [count, setCount] = useState(0);. In handleUp call setCount(count + 1). Return <button onClick={handleUp}>{count}</button>. Export it.

Show example solution

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  function handleUp() { setCount(count + 1); }
  return <button onClick={handleUp}>{count}</button>;
}

export default Counter;

Test yourself

Which hook is used in this project?
```
useState remembers the changing number.
```
- useRef
- useEffect
- useContext
- useState
Show answer

useState — useState holds the number.

Project: Counter app: fill in the missing part

const [count, setCount] = useState(____);

Show answer

const [count, setCount] = useState(0);

Project: Counter app: match the terms

count

Number state
setCount

Updater
handleUp

Increment handler
onClick

Click event

Next lesson: Number and buttons

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies