How to make step wizard form in ReactJs?

Question

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

Currently there are two components 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 components are under a single form, So I am facing difficulty in making the stepper components 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 components as steps.

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

@bertdida, Thanks for your comment.. Requirement is I need to split up the components 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 https://www.npmjs.com/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, Sep 03 '20 at 05:57
@bertdida, Or you can consider like this example https://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, Sep 03 '20 at 06: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 come to ```step 1``` then already entered data gets lost inside the text editor.. — Undefined, Sep 03 '20 at 13:19

score 2 · Accepted Answer · answered Sep 03 '20 at 06:08

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:

Basic Details
Employment Details
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.

Once again thanks for your quick help.. Isn't it possible to navigate to the steps on click over the step number in the top horizontal bar? Eg.., If we click on ```Step 2``` circle then navigating to ```Employment Details``` ?? — Undefined, Sep 03 '20 at 06:14
Yes sure! We could include `onClick` to our sections object. I update the codesandbox. — bertdida, Sep 03 '20 at 06:16
Bro there? I am having an issue in this solution.. In the codesandbox you have provided above, If we enter profile summary data in text editor under ```step 1``` and if we move to ```step 2``` and if we again come to ```step 1``` then already entered data gets lost inside the text editor.. — Undefined, Sep 03 '20 at 13:17
Please bro I am waiting for your solution in this https://stackoverflow.com/questions/63725657/component-re-render-issue .. I have tried lot of steps on my own and also the answers posted in the question doesn't work.. Please kindly help me.. — Undefined, Sep 04 '20 at 01:39
@Undefined, yep I already checked it. Will try to solve the issue later this afternoon :) — bertdida, Sep 04 '20 at 01:45
Okay bro.. But don't forget bro, waiting for your solution from yesterday.. I am facing tough times in this scenario..Hope you understand my situation.. Once again thanks bro.. — Undefined, Sep 04 '20 at 01:48

score 1 · Answer 2 · answered Sep 03 '20 at 05:20

1

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.

answered Sep 03 '20 at 05:20

sidthesloth

1,399
1
11
19

I don't want do anything from scratch but just need to convert the components inside the form as stepper components.. I don't have routing and all.. Its simple that conversion of the components into horizontal steps thats it.. – Undefined Sep 03 '20 at 05:27
Then give react albus a try. It's perfectly suited to your requirements. Also, I would suggest to break up the form into individual forms. – sidthesloth Sep 03 '20 at 05:34
Could you please help me in making the split up of the form and make it as stepper? Your help is much appreciated.. – Undefined Sep 03 '20 at 05:36
The link I posted does contain examples from simple to complex. Check this out: https://codesandbox.io/s/github/americanexpress/react-albus/tree/master/examples/start-simple?from-embed. It's a simple implementation. It does not have the form part but should get you going. – sidthesloth Sep 03 '20 at 05:43
Yes I gone through that link and thanks for sharing.. But in my case form is the main important part for which I am in the need of help.. Also I am in the need to highlight the active step in top horizontal steps for which I don't find option in this library.. Anyhow thanks for your inputs.. – Undefined Sep 03 '20 at 05:47
React Albus can't install if using React 17+ – James Young Jun 28 '21 at 07:19

How to make step wizard form in ReactJs?

2 Answers2

Linked