React Counter (Guarded Decrement)

easy

By FrontendAtlas Team · Updated Jan 30, 2026

Build a React counter component with increment/decrement and a zero floor. Use state for the count, disable decrement at zero, and keep UI text in sync with state changes so the user always sees valid values. Concepts: react, state, event handlers, components, basics. Framework focus: React hooks (useState/useEffect), JSX event handling, and one-way props/state flow.

React useState Event handlers Basic component structure

Requirements

Render a <Counter /> as the main UI.
Display the current count value.
Provide '+' and '-' buttons to increment and decrement.
Prevent the count from ever going below 0.

Expected behavior

Clicking '+' increases the count by 1.
Clicking '-' decreases the count by 1, but never below 0.
Initial count starts at 0.

Implementation notes

Use React state (useState) to store the count.
Guard the decrement so it never sets a negative value.
Keep everything in a single small component for this exercise.

Guides

Shipping Code Under PressureBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use the relevant interview-question hub, then move into a concrete study plan before targeted company sets.

Browse React interview questions Open frontend interview questions hub Open 30-day foundations study plan Browse company questions Open React prep path

Files

Select a file

No preview yet. Click “Rebuild preview”.