We don't have to split the components to their own forms - we can just use the current form to wrap the Stepper component.

Supposed we want to display 3 sections:

1. Basic Details


2. Employment Details


3. Review

We could structure our code like below. The idea is to just display only the section depending on the currentPage state.

Hopefully the code is self-explanatory.

import Stepper from 'react-stepper-horizontal';



const Form = () => {

  const [value] = React.useContext(FormContext);



  const [currentPage, setCurrentPage] = useState(1);

  const sections = [

    { title: 'Basic Details' },

    { title: 'Employment Details' },

    { title: 'Review' },

  ];



  const handleSubmit = (e) => {

    e.preventDefault();

    console.log(value);

  };



  const next = () => setCurrentPage((prev) => prev + 1);

  const prev = () => setCurrentPage((prev) => prev - 1);



  return (

    <>

      <h1>Dynamic Form Fields in React</h1>

      <form onSubmit={handleSubmit}>

        <Stepper

          steps={sections}

          activeStep={currentPage}

          activeColor="red"

          defaultBarColor="red"

          completeColor="green"

          completeBarColor="green"

        />



        {currentPage === 1 && (

          <>

            <BasicDetails />

            <button onClick={next}>Next</button>

          </>

        )}



        {currentPage === 2 && (

          <>

            <EmploymentDetails />

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>

              <button onClick={prev}>Back</button>

              <button onClick={next}>Next</button>

            </div>

          </>

        )}



        {currentPage === 3 && (

          <>

            <pre>{JSON.stringify(value, null, 2)}</pre>

            <div style={{ display: 'flex', justifyContent: 'space-between' }}>

              <button onClick={prev}>Back</button>

              <button onClick={handleSubmit}>Submit</button>

            </div>

          </>

        )}

      </form>

    </>

  );

};

Read more for supported customizations on the react-stepper-horizontal docs.