javascript - How to make step wizard form in ReactJs? - Stack Overflow

I am making resume generation application and I have done the things into ponents.

Currently there are two ponents such as,

-> BasicDetails
-> EmploymentDetails

Complete working example:

index.js

  <form onSubmit={handleSubmit}>
    Basic Details:
    <br />
    <hr />
    <BasicDetails />
    <br />
    <br />
    Employment Details:
    <br />
    <hr />
    <EmploymentDetails />
    <div className="submit-button">
      <button
        className="btn btn-primary mr-2"
        type="submit"
        onSubmit={handleSubmit}
      >
        Save
      </button>
    </div>
    <pre>{JSON.stringify(value, null, 2)}</pre>
  </form>

All the ponents are under a single form, So I am facing difficulty in making the stepper ponents for the whole form.

The library that I have tried is: react-stepper-horizontal but I am unable to wrap the form over this.

Including any other library also appreciated to achieve the result..

Requirement:

Need to implement the react-stepper-horizontal that will have the form as wrapper and each ponents as steps.

Could you please kindly help me in making horizontal the step wizard form that has the ponents as each steps? Thanks in advance..

I am making resume generation application and I have done the things into ponents.

Currently there are two ponents such as,

-> BasicDetails
-> EmploymentDetails

Complete working example:

https://codesandbox.io/s/next-dynamic-testing-issue-forked-h1nt8

index.js

  <form onSubmit={handleSubmit}>
    Basic Details:
    <br />
    <hr />
    <BasicDetails />
    <br />
    <br />
    Employment Details:
    <br />
    <hr />
    <EmploymentDetails />
    <div className="submit-button">
      <button
        className="btn btn-primary mr-2"
        type="submit"
        onSubmit={handleSubmit}
      >
        Save
      </button>
    </div>
    <pre>{JSON.stringify(value, null, 2)}</pre>
  </form>

All the ponents are under a single form, So I am facing difficulty in making the stepper ponents for the whole form.

The library that I have tried is: react-stepper-horizontal but I am unable to wrap the form over this.

Including any other library also appreciated to achieve the result..

Requirement:

Need to implement the react-stepper-horizontal that will have the form as wrapper and each ponents as steps.

Could you please kindly help me in making horizontal the step wizard form that has the ponents as each steps? Thanks in advance..

• javascript
• reactjs
• forms
• next.js
• stepper

Share Improve this question Follow edited Sep 3, 2020 at 5:42 Undefined asked Sep 3, 2020 at 5:15 UndefinedUndefined 1,02166 gold badges2828 silver badges5252 bronze badges 4

• You wan't separate forms for the 2 ponents? – bertdida Commented Sep 3, 2020 at 5:53
• 1 @bertdida, Thanks for your ment.. Requirement is I need to split up the ponents into horizontal steps.. As you are already aware of the form structure I believe you can help me in better way.. Consider like this library npmjs./package/react-stepper-horizontal here in step 1 I need to have basic details and in Step 2 I need to have the employments details and further steps goes on .. But all these steps are considered as single form.. If there is a need to split up the form and join all at once at last on click of save button is also okay for me.. – Undefined Commented Sep 3, 2020 at 5:57
• @bertdida, Or you can consider like this example codesandbox.io/s/blybc (It has only two steps) but in my case the steps will goes on.. On click on the next/previous button in each step then that particular step needs to get highlighted at top horizontal indication.. If you need further inputs then I can also provide the same.. – Undefined Commented Sep 3, 2020 at 6:01
• @bertdida, I am having an issue in this solution.. In the codesandbox you have provided in the below solution, If we enter profile summary data in text editor under step 1 and if we move to step 2 and if we again e to step 1 then already entered data gets lost inside the text editor.. – Undefined Commented Sep 3, 2020 at 13:19

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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

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"
          pleteColor="green"
          pleteBarColor="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.

I'm not sure whether you want to build from scratch yourself but if not, then give React Albus a try. It supports stepper and routing as well.