How do you handle a value that changes over time in React?

Hold the changing value in component state and re-render the view each time it changes. This problem is about completing a timer's start, run, and stop flow.

How do I verify timer behavior?

Check the value before starting (10), that it decreases by 1 each second after starting, and that it stops at 0 without going further — using a time-advancing scenario.

Does this problem need pause or reset?

No. It handles a single countdown with the starting value fixed at 10. Pause, reset, and custom time input are out of scope.

Countdown Timer

Your task

Build a countdown timer. Pressing the start button counts down from 10 by 1 every second and stops at 0. Complete Countdown.

Ground rules

•A single component. The starting value is fixed at 10.

Not required

•Pause, reset, custom time input.

▶About this challenge

Build a React countdown timer. Pressing the start button counts down from 10 by 1 every second and stops at 0. Before starting, 10 is shown, and the starting value is fixed at 10. It all lives in a single component.

A timer is a screen whose value changes on its own as time passes, then stops at a set condition — here, 0. Such a screen has to be handled across its whole lifecycle: start, then run, then stop. In React you hold the value that changes over time in state and re-render the view each time it changes. What makes the behavior trustworthy is verifying not just a single tick but the whole flow from start until it stops at 0.

How do you handle a value that changes over time in React?: Hold the changing value in component state and re-render the view each time it changes. This problem is about completing a timer's start, run, and stop flow.
How do I verify timer behavior?: Check the value before starting (10), that it decreases by 1 each second after starting, and that it stops at 0 without going further — using a time-advancing scenario.
Does this problem need pause or reset?: No. It handles a single countdown with the starting value fixed at 10. Pause, reset, and custom time input are out of scope.