logo

Coding Activist

HomeQuestionsMachine CodingTech RoadmapProductEmber
JobsSign In

Progress Stepper

MediumReact Components20 min5 tests

Build a 4-step wizard with Back/Next navigation, a live "Step X of 4" status, a heading showing the current step name, and correctly disabled boundary buttons.

Create a multi-step wizard that walks the user through the steps ["Account", "Profile", "Review", "Done"].

The component starts on the first step. A role="status" element announces the current position as "Step X of 4" (1-based), and a heading displays the name of the current step.

Two buttons control navigation:

  • Back moves to the previous step. It is disabled while on the first step.
  • Next moves to the next step. It is disabled while on the last step.

Clicking Next then Back should return you to where you started. The status text and the heading must always stay in sync with the active step.

Requirements

  • Render the steps in order: Account, Profile, Review, Done (4 total). Start on the first step.
  • Show a role="status" element whose text reads "Step X of 4" where X is the 1-based index of the current step.
  • Show a heading (e.g. <h2>) containing the name of the current step.
  • Provide a "Back" button that goes to the previous step and is disabled on the first step.
  • Provide a "Next" button that goes to the next step and is disabled on the last step.
  • Keep the status text and heading synchronized with the active step at all times.
Hints (3)
  1. Track the current step with a single piece of state: a numeric index starting at 0.
  2. Derive the displayed values from the index — the heading is steps[index] and the status is Step ${index + 1} of ${steps.length}.
  3. Disable Back when index === 0 and disable Next when index === steps.length - 1, rather than letting the index go out of bounds.

Topics

  • React
  • React Components

Asked at

Uber · Delhivery · PhonePe · Freshworks · Myntra · Flipkart

Join Us
blur