Lessons In Multi-Step Form With React & Material UI
Tags: webdev, react, beginners, startup
Published: 2020-05-10 08:17:17

# Introduction
![undraw product iteration kjok](//images.ctfassets.net/ly2f59p4unnn/1bGNiQAsV3XpIyKHkDCdt1/91a552750ddc50553b21f0d59a8a51a8/undraw_product_iteration_kjok.png)

When it comes to a multi-step form with React. I had trouble searching for related materials. On how to do it as I was implementing a survey form for one of my projects. 

Fortunately, I stumbled across a great tutorial by Brad from Traversy Media on his [Multi Step Form with React & Material UI](https://youtu.be/zT62eVxShsY) with further knowledge from [CSS Tricks](https://css-tricks.com/the-magic-of-react-based-multi-step-forms/). Despite it might be dated at the time of this writing. It was useful for me to implement it in my project.

I would suggest that you take a look at his tutorial. If you are unable to fulfil, with just basic forms that you can get it off the shelf. Like for example [Typeform](https://www.typeform.com/) or [Google Forms](https://www.google.com/forms/about/). 

# Breakdown of Multi-Step Form
![undraw work together h63l](//images.ctfassets.net/ly2f59p4unnn/3l8ZkXZD7beR4Nw6xRFfc0/45493bb2e5c7af401b6a1e360efac195/undraw_work_together_h63l.png)

In Brad's [tutorial](https://youtu.be/zT62eVxShsY) and [CSS Tricks](https://css-tricks.com/the-magic-of-react-based-multi-step-forms/). It gives you enough information and concepts for you to get started. I am providing you with a breakdown on it so that it is easier to make it work for you. If you do not have the time to watch the video or read the article. 

With some gotcha that you might be mindful while implementing it. In the multi-step form, you have **5** main parts that need to be created for it to work. If you are using the [Create React App template](https://github.com/facebook/create-react-app) by Facebook and following Brad's [tutorial](https://youtu.be/zT62eVxShsY):

* Global State Variables - It is created under a variable name called **values** & **step**. With the purpose to store, process, transit to the next form and shared the data between all forms. While the user is filling up the form. 

* Master Form Template - It is used as a template for multiple pages of the form for UI consistency.

* Form Manager - This is where you provide the **routing**. It includes the use of global state variables & methods namely **prevStep** & **nextStep**. Which is used for transitioning from one page to another by tracking the page number as the **step** global state variable.

* Individual Pages - In the [tutorial](https://youtu.be/zT62eVxShsY) by Brad, he created individual react components to represent each form to be filled.  

* Form Submission & Persistent Storing of Data using an API - You need to be mindful to include **persistent storing** of data for the filled form pages. As **form dropoff rate** is a reality for anyone implementing any kind of form. It increases when there is a **large number** of questions, that need to be filled by the person taking it. Which is why capturing & storing these data is useful for marketing and user experience purposes.
 
# Have a Game Plan in Mind
![undraw sorting thoughts 6d48](//images.ctfassets.net/ly2f59p4unnn/61cCp86COk7Hgjn9vxhy6Q/58aef4753c8e6dbebdfe39f0d4120317/undraw_sorting_thoughts_6d48.png)

It was kind of daunting & wasting a lot of my time with a rough plan in my mind while I implement it.  I would suggest that you have a checklist and plan for the **UI design**, **user flow** & **business logic** that is outlined & created. 

As I became painfully aware of the **gaps** in my implementation. While building it out as I go along. Which I was able to address it quickly. When it is deployed with people filling up the form with tons of **coffee** & **self-doubts** to do it.

# Pitfalls When Working with Material UI
![undraw throw away ldjd](//images.ctfassets.net/ly2f59p4unnn/5ti1iVRXuiqXZ4VwUdgb0j/ab7800de19ea35506b0c914a3c0f931e/undraw_throw_away_ldjd.png)

Always read the documentation thoroughly and test out the various component in your **master form** before you implement it for each form page. 

There are a lot of times, I wish I had added property like **error** into the master form. Before I had pasted a previous copy into the various form pages. Which it can take up a lot of time and effort to modify. When you have 30 over individual forms to be implemented.

I know I should follow the **don't repeat yourself** method. But I prefer the concept of **move fast & break things**. Especially when I had a **time crunch** to get it out **as soon as possible**.

Due to the way the React components is made using the material UI. You need to handle the **validation** by yourself. It provides the **error** property and display **error messages**.  Which a **validation** method can be called. By checking the **values** variable for each input react component, whenever a person clicks on the **continue** button. 
 
# Conclusion
![undraw code thinking 1jeh](//images.ctfassets.net/ly2f59p4unnn/69OFeWWLAuYVYzUFYKDvn8/205cc5f63348a89e2ac7e74d9c3b27c9/undraw_code_thinking_1jeh.png)

I hope that this will be useful for you, who is planning to implement the multiple-step form to React. Moving forward, I found that the use of [React Hook Form](https://react-hook-form.com/) is a better alternative to using the material UI component. 

Due to the reason that it has built-in form validation and it is easy to understand for anyone to get started. Which makes me feel like I'm building an HTML instead of a React form.

If you like this article do **sign up** for my [Adventurer's Newsletter](https://maxongzb.activehosted.com/f/1) which contains interesting content I stumble across over the week in the area of **Python**, **Web Development**, **Startup**.

You can also **follow** me to get the **latest** update of my article on **Dev**
The original post was on [Lessons In Multi-Step Form With React & Material UI - Reading Time: 4 Mins](https://www.maxongzb.com/lessons-in-multi-step-form-with-react-and-material-ui-reading-time-4-mins/) and cover image by [Bruno Nascimento on Unsplash](https://unsplash.com/photos/PHIgYUGQPvU)

# Reference
* [Multi Step Form With React & Material UI](https://youtu.be/zT62eVxShsY)
* [Material UI](https://material-ui.com/)
* [The Magic of React Based Multi-Step Forms](https://css-tricks.com/the-magic-of-react-based-multi-step-forms/)
* [Create React App template](https://github.com/facebook/create-react-app)
* [Typeform](https://www.typeform.com/)
* [Google Forms](https://www.google.com/forms/about/)
* [React Hook Form](https://react-hook-form.com/)
* [Undraw](https://undraw.co/illustrations)