Frontendx
README.md
SOLUTION.md
main.tsxentry
App.tsx
App.css
index.html
vite.config.ts
Installed
react@^19.2.0
react-dom@^19.2.0

Create a Reusable Multi-Stepper Wizard Component in React

easyreactcomponent designwizardpropssde2AmazonUberGoogleUI Component

Prompt

Build a reusable multi-step stepper component that accepts an array of child components and renders them one at a time in sequence. Show numbered step indicators with a progress line that fills as steps are completed. Expose onNext and onPrev navigation callbacks to each child so they can validate before proceeding. Support a defaultActive prop to start at a specific step and an unmountOnHide prop to control whether hidden steps stay in the DOM.

Use useState for activeStep (index). Render only the child at activeStep index.
Test Results

Create a Reusable Multi-Stepper Wizard Component in React

Build a reusable multi-step stepper component that accepts an array of child components and renders them one at a time in sequence. Show numbered step indicators with a progress line that fills as steps are completed. Expose onNext and onPrev navigation callbacks to each child so they can validate before proceeding. Support a defaultActive prop to start at a specific step and an unmountOnHide prop to control whether hidden steps stay in the DOM.