Premium
React Dynamic Counter Buttons (Grow-on-Click)
Challenge summary
In React, let users add or remove step buttons dynamically, and have each button update the counter by its own step value. Use state arrays and event handlers to keep the UI in sync.
What you'll practice
- Render the dynamic counter buttons UI as the main screen.
- Initially render exactly 1 counter button with value 0.
- All buttons keep their own values independently.
- Click second button twice → second becomes 2, and two more new buttons (0, 0) are appended over those clicks.
- React focus: store step buttons in state arrays and update immutably.
What Premium unlocks
Premium unlocks the runnable workspace, behavioral checks, implementation walkthrough, and edge-case discussion.
Free related practice
Upgrade to FrontendAtlas Premium to unlock this challenge. Already upgraded? Sign in to continue.