How to create multi-step form in Reactjs

Question

How can we create stepper that is multi-step form in Reactjs for multiple step form submission. Currently i am not showing component for each step

I want to return div component for each step for that i am not able to apply logic for that..

For now i am able to return the component but it return all the component at same time, as i want to return step by step in center

CodeSandbox Link

Here is code for stepper

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import "./Stepper.scss";

const Stepper = ({ stepColor, steps, direction, currentStep }) => {
  const [stepState, setStepState] = useState([]);

  useEffect(() => {
    let createSteps = steps.map((step, idx) => ({
      description: step.label,
      component: step.component,
      completed: idx < currentStep - 1, // past are completed
      selected: idx <= currentStep - 1, // past & present are colored
      highlighted: idx === currentStep - 1 // only present is highlighted
    }));

    setStepState(createSteps);
  }, [steps, currentStep]);

  return (
    <div className={`stepper-wrapper-${direction}`}>
      {stepState.map(
        ({ selected, completed, highlighted, description, component }, idx) => (
          <div className="step-wrapper" key={idx}>
            <div
              className={`step-number step-number-${
                selected ? "active" : "disabled"
              }`}
              style={{ background: `${selected ? stepColor : "none"}` }}
            >
              {completed ? "✔" : idx + 1}
            </div>
            <div
              className={`step-description ${
                highlighted ? "step-description-active" : ""
              }`}
            >
              {description}
            </div>
            {idx + 1 !== stepState.length && (
              <div
                className={`divider-line divider-line-${stepState.length}`}
              />
            )}
            <div>{component}</div>
          </div>
        )
      )}
    </div>
  );
};

Stepper.propTypes = {
  direction: PropTypes.string.isRequired,
  steps: PropTypes.array.isRequired
};

export default Stepper;

score 0 · Answer 1 · answered Jul 25 '20 at 13:18

0

One thing I found odd on your codesandbox is the props your giving in the <Stepper/> Component is wrong

  <div className="stepper-container-horizontal">
    <Stepper
      direction="horizontal"
      currentStepNumber={state.currentStep - 1}
      steps={stepsArray}
      stepColor="purple"
    />
  </div>

You are passing to currentStepNumber but the Step component is accepting currentStep

In this line

const Stepper = ({ stepColor, steps, direction, currentStep = 1 }) => {...

I did change currentStepNumber to currentStep and is working now.

answered Jul 25 '20 at 13:18

keysl

2,127
1
12
16

Hi @keysl for each step how can i add component displaying some details can you give some points on this – Parth Tiwari Jul 25 '20 at 13:25
hmmm since you're controlling Stepper by the Parent(App.js) Component `state` I reckon using that `currentStep` state in manipulating fields. Your Step should not care on any other components and can stay as it is right now. – keysl Jul 25 '20 at 13:30
Hi @keysl i update my code and link too please have a look – Parth Tiwari Jul 25 '20 at 14:01

How to create multi-step form in Reactjs

1 Answers1