Stepper

Problem Statement

Build a stepper for a multi step flow. It shows every step as a numbered circle with a label, shows the content of the current step, and lets the user go back and forward.

Functional Requirements

1. Steps prop: Take a steps array where each item has a label and a content node.
2. Step header: Render a numbered circle and the label for each step, with a line joining each step to the next one.
3. Progress state: Mark every step up to and including the current one as active, and color the lines between completed steps.
4. Content: Show only the content of the current step.
5. Navigation: Back goes to the previous step and Continue goes to the next one. Neither moves past the first or last step.

Technical Constraints

• The current step is a single index in useState, starting at 0.
• There is no finished state after the last step. Continue does nothing there.

Component Overview

The Stepper component is a multi-step progress indicator commonly used in forms, wizards, or multi-step processes.

Key Components

1. State Management

const [currentStep, setCurrentStep] = useState(0);

• Tracks the current active step
• Initialized to 0 (first step)
• Managed using React's useState hook

2. Navigation Functions

handleNext()

const handleNext = () => {
  if (currentStep < steps.length - 1) {
    setCurrentStep(currentStep + 1);
  }
};

• Moves to next step if not on last step
• Prevents going beyond last step using length check

handleBack()

const handleBack = () => {
  if (currentStep > 0) {
    setCurrentStep(currentStep - 1);
  }
};

• Moves to previous step if not on first step
• Prevents going below first step using zero check

3. Props Structure

steps = [
  {
    label: "Step Name",
    content: <Component />
  }
]

• Array of step objects
• Each step has a label and content
• Content can be any React component

4. Rendering Logic

Step Numbers and Lines

<div className={`step-number ${index <= currentStep ? "active" : ""}`}>
  {index + 1}
  {index < steps?.length - 1 && (
    <div className={`step-line ${index < currentStep ? "active" : ""}`}></div>
  )}
</div>

• Displays numbered circles for each step
• Adds 'active' class to completed steps
• Renders connecting lines between steps
• Last step doesn't have a line

Content Display

<div className="stepper-content">{steps[currentStep]?.content}</div>

• Shows content of current step only
• Content changes when currentStep changes

Navigation Controls

<div className="stepper-controls">
  <button onClick={handleBack}>Back</button>
  <button onClick={handleNext}>Continue</button>
</div>

• Back and Continue buttons
• Controls step navigation

Usage Example

const steps = [
  {
    label: "Personal Info",
    content: <div>Personal Information Content</div>
  },
  // ... more steps
];

<Stepper steps={steps} />

• Define steps array with labels and content
• Pass steps array as prop to Stepper component