Lesson 10 — Counter with reset

Several buttons, one state

Different handlers can change the same state in different ways: one adds 1, another resets to 0. Each button gets its own onClick arrow function that calls the setter with the new value.

<button onClick={() => setVol(vol + 10)}>louder</button>
<button onClick={() => setVol(50)}>default</button>

Note: Next.js pages are React components, so this preview runs your code with plain React in the browser. Next.js-only features (the file router, server rendering, data fetching on the server) are not running here — where a lesson needs them, it shows a small simulation instead.

Why it matters: real controls — carts, filters, forms — always have more than one action on the same data.