Premium

React Dynamic Counter Buttons (Grow-on-Click)

By FrontendAtlas Editorial · Updated Jan 30, 2026

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.