title: How to create multi-step form in Reactjs
body: <p>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</p>
  <p>I want to return div component for each step for that i am not able to apply logic for that..</p>
  <p>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</p>
  <p><a href="https://codesandbox.io/s/relaxed-heyrovsky-cx9cg?file=/src/App.js" rel="nofollow noreferrer">CodeSandbox Link</a></p>
  <p>Here is code for stepper</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import &quot;./Stepper.scss&quot;;
  
  const Stepper = ({ stepColor, steps, direction, currentStep }) =&gt; {
    const [stepState, setStepState] = useState([]);
  
    useEffect(() =&gt; {
      let createSteps = steps.map((step, idx) =&gt; ({
        description: step.label,
        component: step.component,
        completed: idx &lt; currentStep - 1, // past are completed
        selected: idx &lt;= currentStep - 1, // past &amp; present are colored
        highlighted: idx === currentStep - 1 // only present is highlighted
      }));
  
      setStepState(createSteps);
    }, [steps, currentStep]);
  
    return (
      &lt;div className={`stepper-wrapper-${direction}`}&gt;
        {stepState.map(
          ({ selected, completed, highlighted, description, component }, idx) =&gt; (
            &lt;div className=&quot;step-wrapper&quot; key={idx}&gt;
              &lt;div
                className={`step-number step-number-${
                  selected ? &quot;active&quot; : &quot;disabled&quot;
                }`}
                style={{ background: `${selected ? stepColor : &quot;none&quot;}` }}
              &gt;
                {completed ? &quot;✔&quot; : idx + 1}
              &lt;/div&gt;
              &lt;div
                className={`step-description ${
                  highlighted ? &quot;step-description-active&quot; : &quot;&quot;
                }`}
              &gt;
                {description}
              &lt;/div&gt;
              {idx + 1 !== stepState.length &amp;&amp; (
                &lt;div
                  className={`divider-line divider-line-${stepState.length}`}
                /&gt;
              )}
              &lt;div&gt;{component}&lt;/div&gt;
            &lt;/div&gt;
          )
        )}
      &lt;/div&gt;
    );
  };
  
  Stepper.propTypes = {
    direction: PropTypes.string.isRequired,
    steps: PropTypes.array.isRequired
  };
  
  export default Stepper;
  
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/HtNvp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HtNvp.png" alt="enter image description here" /></a></p>