Project: Counter app
- React course
- Beginner
- Lesson 45/84
- 4 min
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.
Practice 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.
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); }
return <button onClick={handleUp}>{count}</button>;
}
export default Counter;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which hook is used in this project?
useState remembers the changing number.- useRef
- useEffect
- useContext
- useState Correct answer
Explanation: useState holds the number.
2 Project: Counter app: fill in the missing part
const [count, setCount] = useState(____);const [count, setCount] = useState(0);Explanation: The counter starts at zero.
3 Project: Counter app: match the terms
| Term | Meaning |
|---|---|
count |
Number state |
setCount |
Updater |
handleUp |
Increment handler |
onClick |
Click event |