Published: May 10, 2020
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 with further knowledge from CSS Tricks. Despite it might be dated at the time of this writing. It was useful for me to implement it in my project.
In Brad's tutorial and CSS Tricks. 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 by Facebook and following Brad's tutorial:
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.
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.
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 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.