Setup a customisable multi-step form in React
Tags: react, tutorial, javascript, webdev
Published: 2021-01-13 00:18:38

{% github w3collective/react-multi-step-form no-readme %}

In this tutorial we’ll be setting up a multi-step form (also called a wizard form) component in React. Breaking up large forms into multiple steps makes them less daunting for the user to complete. As React is component based this can be achieved by including each step in an individual component.

First let’s setup a new project using [Create React App](https://w3collective.com/create-react-app/):

```
npx create-react-app multi-step-form
```

Next create a components folder in the src directory with the following files:

```
MultiStep1.js
MultiStep2.js
MultiStep3.js
MultiStepForm.js
MultiStepSubmit.js
```

We’ll code each of the steps before pulling it all together in `MultiStepForm.js`.

##MultiStep1.js

The first step of the form will capture the name & email:

```javascript
import React from "react";
const Step1 = (props) => {
  const { data, handleChange, next } = props;
  return (
    <form>
      <p>
        <label htmlFor="name">Name:</label>
        <input
          type="text"
          name="name"
          value={data.name}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          name="email"
          value={data.email}
          onChange={handleChange}
        />
      </p>
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step1;
```

We store the values entered into the fields in the data prop, the handleChange updates the values stored and next loads the next step of the form. The functionality for each of these will come later in `MultiStepForm.js`.

##MultiStep2.js

The second step captures some location data:

```javascript
import React from "react";
const Step2 = (props) => {
  const { data, handleChange, next, back } = props;
  return (
    <form>
      <p>
        <label htmlFor="street">Street:</label>
        <input
          type="text"
          name="street"
          value={data.street}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="city">City:</label>
        <input
          type="text"
          name="city"
          value={data.city}
          onChange={handleChange}
        />
      </p>
      <p>
        <label htmlFor="postcode">Postcode:</label>
        <input
          type="number"
          name="postcode"
          value={data.postcode}
          onChange={handleChange}
        />
      </p>
      <button onClick={back}>Back</button> 
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step2;
```

This is the same as the first step except for the inclusion of a back button.

##MultiStep3.js

The third step captures a comment:

```javascript
import React from "react";
const Step3 = (props) => {
  const { data, handleChange, next, back } = props;
  return (
    <form>
      <p>
        <label htmlFor="comments">Comments:</label>
        <textarea
          name="comments"
          value={data.comments}
          onChange={handleChange}
        ></textarea>
      </p>      
      <button onClick={back}>Back</button> 
      <button onClick={next}>Next</button>
    </form>
  );
};
export default Step3;
```

##MultiStepSubmit.js

After each of the steps has been completed we’ll display the data captured:

```javascript
import React from "react";
const Submit = (props) => {
  const { data } = props;
  const listItems = Object.entries(data).map(([key, value])=>(
    <li>
      <strong>{key}:</strong> {value}
    </li>
  ));
  return (
    <div>
      <ul>{listItems}</ul>
      <button type="submit">Submit</button>
    </div>
  );
};
export default Submit;
```

This is simply looping through the `data` and outputting the key and value into an unordered list. We wont be creating the submit functionality in this tutorial there are many ways to go about this. If you would like to see an example of how this data could be sent via email using Node.js check out [this tutorial](https://w3collective.com/react-contact-form/).

##MultiStepForm.js

We can now pull it all together in the `MultiStepForm` component:

```javascript
import React, { useState } from "react";
import Step1 from "./MultiStep1";
import Step2 from "./MultiStep2";
import Step3 from "./MultiStep3";
import Submit from "./MultiStepSubmit";

const MultiStepForm = () => {
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    street: "",
    city: "",
    postcode: "",
    comments: "",    
  });
  const handleChange = (event) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
  };
  const next = () => {
    setCurrentStep(currentStep + 1);
  };
  const back = () => {
    setCurrentStep(currentStep - 1);
  };
  switch (currentStep) {
    case 1:
      return (
        <Step1 
          data={formData} 
          handleChange={handleChange} 
          next={next} 
        />
      );
    case 2:
      return (
        <Step2
          data={formData}
          handleChange={handleChange}
          next={next}
          back={back}
        />
      );
    case 3:
      return (
        <Step3
          data={formData}
          handleChange={handleChange}
          next={next}
          back={back}
        />
      );
    default:
      return <Submit data={formData} back={back} />;
  }
};
export default MultiStepForm;
```

As you can see the multi-step functionality is handled by a `switch` statement that checks what the `currentStep` is and then renders the component for that step.

If you want to modify or add additional fields you’ll need to update the keys in the `formData` inline with your new fields. Additional steps can be created by importing a new component and adding it to the `switch` statement.

All that’s left todo is load the component into the app by modifying `App.js` as follows:

```javascript
import MultiStepForm from "./components/MultiStepForm";
import "./App.css";
const App = () => {
  return <MultiStepForm />;
};
export default App;
```

There you have it, a multi-step form that you can modify to suit your needs. If you enjoyed this tutorial why not check out some of my other tutorials about building [custom React components](https://w3collective.com/tag/react/).