Multi-step Form using React Hooks

I was working on my office project which had a lot of different types of forms. There was one form among all that I saw and wondered how it was done. Yes, you guessed it right: Multi-step form. There were no routes changes when I moved through the form which amazed me. Then I started to do some research on how to do it. I came across a few tutorials which used class components and other used ready made hooks. I started to wonder if it can be done without much of trouble and just simple logic. After some research I found what I was looking for i.e. the implementation logic and started to write code.

Here is what we will achieve at the end of this article

So let’s begin. I won’t go towards installing react app and all. My assumption is that you already have a react project set up. If not, you can set one up easily using create-react-app.

https://reactjs.org/docs/create-a-new-react-app.html

The key to multipage forms is the Switch Statement. Let me explain the basic framework. Let’s suppose we have three pages.

1. User Personal Details
2. User Social Details
3. Review Page

switch(case) {
  case 1: 
    --some component--
  case 2:
    --some other component--
  case 3:
    --some other component--
}

Makes sense???

Let’s look at it in more detail.

Let’s start by making an input object with all the fields and setting it using useState hook inside App component.

const userDetails = {
name: "",
email: "",
password: "",
phone: "",
facebook: "",
twitter: "",
};
const [values, setValues] = useState(userDetails);

Now, we need to set a step value and assign each component with a unique step value in switch statement such that only that particular component is rendered for that particular step value. Confused? Let’s see in more detail.

Start by setting state for a step using useState.

const [step, setStep] = useState(1);

Now we can use switch statement to switch through the steps and their respective components.

switch (step) {
case 1:
return (
<MultistepForm
values={values}
handleNext={handleNext}
handlePrevious={handlePrevious}
setValues={setValues}
handleInputChange={handleInputChange}
/>
);
case 2:
return (
<UserDetails
values={values}
handleNext={handleNext}
handlePrevious={handlePrevious}
setValues={setValues}
handleInputChange={handleInputChange}
/>
);
case 3:
return <ReviewPage values={values} handlePrevious={handlePrevious} />;
}

MultiStepForm, UserDetails and ReviewPage are just different components that I have imported. They have form input which changes the props that is passed from App component. Let’s keep the abstraction level upto this point because covering all of the forms will make this article very long.

All three of those pages will have buttons. “Next” button just increases the step count by 1 and “Previous” button decreases by 1.

const handlePrevious = () => {
setStep(step - 1);
};
const handleNext = () => {
setStep(step + 1);
};

We pass those props along with the initial values. The initial values for a particular field changes on input change for that field which will be changed on state using :

const handleInputChange = (e) => {
setValues({ ...values, [e.target.name]: e.target.value });
};

Now, we just need to pass these as props to the desired component to achieve the previous, next and state change properties and attach to respective event handlers.

<form>
<input
type="password"
placeholder="Enter Password"
name="password"
value={values.password}
onChange={handleInputChange}
/>
<button onClick={handleNext}>
Next
</button>
</form>

The propose of me writing this article was to make the implementation logic simple without much of hassal. Using the basic concept above, you can easily make multistep form and compose the components in it as desired.

Thank you