How to create a multi-step form with React Hooks?

Basic understanding of a simple multi-step react form

Chitru Shrestha
Feb 5 · 3 min read

If you think it structurally anything in the world is not that difficult as you think it to be. It is difficult until you know. Forms in web development are fundamental parts and their knowledge will contribute to you a better developer. We will look at the flow of the form and try to understand form from it.

Here we are in codesandbox.io with a react app sandbox. And then react-hooks-helper dependency added to the sandbox. React hooks were introduced in React 16.8 and our sandbox is at 16.12.0 so we have to use it.

Step 1

When we create a react app in we will have and in the file

We just need to add a new component/file then create with the following code. It just calls our first component i.e. MultiStepForm

Step 2

In this step you can see a bunch of codes with that is importing new components viz. , , , and .

Those are our steps in this form. Each file is a step we are going to when a user presses the next button. First, let us look at the code and try to understand it.

The first thing we have to understand is it uses react hooks. The second line is where our file is imported. All new components are imported into this file. First, determine the number of steps and then according to need we create files with a name that suits.

We also passed some default data in the form. And finally, a switch statement is used so that it switches between the components that look like multi-step.

Please also have a look at destructuring here it might clear your understanding of what’s going on into this code.

Step 3

It’s about time we prepare our components and start taking input as a good form should. You can look at the code base of other components Names, Address, Contact, Review and Submit. They just contain codes for form. And as the switch statement shows in

Here is their code.

Names.js

It’s a simple form so we are not going to use much just Firstname, Lastname and a Nickname.

Address.js

has Address of street, City, State and Zip code.

Contact.js

has email and phone.

Review.js

is where you review what you have filled in the form. And you can edit if you like.

Submit.js

is where the form is submitted to the server. There is no server so we are just displaying a success message saying the form is submitted.

We also have two helper components , .Here are their codes.

ItemForm.js

This component helps to create form items. It is imported and used in every component.

StateDrop.js

is made for the Address component. It helps to create a dropdown in state item in the form. As you can see the state has some elements in the select box.

Don’t get overwhelmed with codes

Look at the final form that is created.

Also, please have a look at the working form here. Click me

Try to go and edit yourself and try to think process once again. Once you understand its not magic anymore its pure logic driving our form.


Thank you for your time.

I write to educate myself and help others in the process.

JavaScript in Plain English

Learn the web's most important programming language.

Chitru Shrestha

Written by

I design, develop web components and systems and write about them.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade