Multi-Step Form with React (Simple Version)

marker hey everybody chris sev here and if you've been following along with some of our projects on the side we are building a youtube dashboard a productive youtube dashboard that we're calling spacebar so this will help you get up and running with youtube kind of give you hints at like how to grow your channel stuff like that from all the stuff i've been learning about youtube and we've been designing a little bit of the ui and here is the kind of the sign up process it's like hey sign up with google and then this is step one and you'll see this little astronaut guy right here and then as you go down to step two he floats along to step two here's the thing a form and then we go over here's step three and he's over on the right side so we're kind of wondering you know how do we build out this sort of dashboard multi-step form in react and i know there's a hundred different ways to build this so i thought you know what let's tackle this problem in react a couple different videos but today i want to talk a little bit about how we're going to solve the problem the different ways we could build a multi-step form in react and how we can create the forms have them wired together across different components or pages yeah so let's build a simple simple version of this in today's video and then in the next videos we'll take it along and do more advanced versions we'll bring in animation so we can like transition between pages all that good stuff so if i go to my notes right here and i'll just write out notes there's a couple different ways to build this multi-step form and what's really interesting about it is the way that you choose is going to depend on your solution or what you want to achieve so really there's two problems when you're building a multi-step form one is routing and two is the forms itself or state so where do we have routing happening like do we have the two different ways i would say one is all in a single component and that's the way we're going to do it today i think that's the simplest way to do it but when you get to a larger sort of scenario then we can do all based on the url routing so that'll be like slash info slash let me break that out so they'll be like slash info you can say slash sign up slash info slash sign up slash goals stuff like that and then you can push people through based on the routing so that's problem number one is routing problem number two is where do we put the form and where do we hold the state as in the data that goes through these steps so option number one here is your form can have one giant form one giant form and that'll be across all of the pages or components which is actually i think a very tough thing to do but that's kind of the way you would probably think to solve this first right just one big form and then each thing is like a couple inputs a couple inputs i think that ends up being a little bit messy in the long run so the other way you can do it is multiple forms across components or pages and then the solution here is saying state is stored in a global sort of scenario like context or like redux and i think i really like this approach i think it's cleaner i think if you switch out some of the steps you can like take out part of the steps and then move it over there easier in this setup than if you could in this setup so this would just be one giant form one big state object probably in the same component so what we're gonna do today i know that was kind of a long setup for this and i'm sorry but it's important to talk about how to do these things because there's so many options and solutions and each one's different well you could pick one based on your needs in one project and a different solution in another project so today we are doing all in one single component and we are going to do none of the forms actually so we're not going to deal with this i want to talk about the routing side first before we go into the form so that'll be another video so to start us off let's get this going we're going to go into code sandbox right here brand new one go into a react code sandbox and let's see how fast we can do this because i don't want to drag this out too long i want this to be a simple solution so let's say we have right here the progress bar goes here and i hope that's large enough let me zoom in so progress bar goes here the content goes here so we're going to have progress bar and i'm not going to do any styling or anything we're going to keep this as ugly as possible progress bar there content here okay so the first step to this is saying look what are we going to show here based on something and that something is going to be a variable so we're going to say const page is equal to set page sorry const page set page is equal to use state and we'll say one so first page is one and since this is an import use state we need that from react okay so what we're going to do here is we're going to say we can do this down here yeah that's fine to do so we'll say page is equal to 1 and i am page 1. and let's actually put this in an h well let's put this in a div so it can have its own line there we go so i'm page one and then we'll do the same for so we'll do this for two this for three is for four so that's essentially where is my nope that's not it let my preview go come on back there we go okay so that's iron page one and then if we say okay here's page two it goes to page two page three it goes to page three so what we can do here now is create functions and react components so we're going to save function is let's call it onboarding 1 like that return div i am page one so i would say this is the simplest way to create the multi-step because you're just creating components and then you're programmatically showing or hiding the components based on a state variable so there's onboarding one two three page one page two and page three right here and let me just do that right here so we're gonna say onboarding one and we're going to copy that and go down here two three and four here we go two three four okay so that is how we can do that across multiple components and the way that this could work is that we can progress people through this if we have a button right here that is going to say go next and this button it will be responsible for changing the state of this variable so that it can progress and move through this list so we're going to say function go next page and we're going to say set page and we're going to use the functional approach here page is page plus one so when we click this here we're gonna say on click go next page okay so we're on page three let's start on page one now so for on page one we're going to show onboarding one right here because page is equal to one right here so as soon as i click go next it'll go page two page three and page four well oh that's because down here this actually says page four there okay so now we have components we have programmatically shown and hid each component based on this state variable right here and we're able to progress forward by clicking go next page right there so that's the easiest way to do this right we have the button here and now we can have the content go there and then really if you wanted this could sit below all of this as you would probably expect you would have a div right here that held all the content and then there we go that would be your progress bar go next well let's save this and our state is probably way beyond four now so to stop this from going beyond the number of pages that we have we can just go into our yellow next page and say if page is equal to three sorry four then return so don't even try to set page for the new page just say hey there's nothing left so just return so if i go and refresh this page one page two page three page four and then this won't work anymore and what would really be helpful is saying if this is if page is equal to well let's do not equal to four then show that button so what that's essentially saying is hide the button if the page is not hide the button if the page is four so let's refresh this go next go next go next and now the button is gone and you could probably replace that with like a submit button right here page is equal to four and button now this would be the submit button and that would be like a type is submit and that would submit the whole page for all of the data that you have okay so now we have a way to show and hide different components step two is we have a way to go to the next component step three is we're able to submit the page the overall thing at the end let's see what's next what's next is we probably want to have some data that we can pass through to each one of these right so what we do here is say const data is set data is equal to use state and this would be a giant object so this is kind of going to stop pretty soon because i don't want to go too far into this because this leads into getting informed getting in state all that extra stuff that we need to do because i really wanted to focus on just programmatically hiding and showing components in this video for the next video though here is our data we're going to say okay we'll we'll probably have user info we'll probably have like profile info we're probably going to have maybe some settings and all that is going to be part of data and then down here we can say data is equal to data dot user and then this one maybe would need data is equal to data dot settings or profile this one would need data is equal to data dot settings and then in each of these they would have the ability to update this giant object right here so we could just create a new function called update and then we would say type and data and this is going to get into a little pseudo code here i don't want to go too far but we're getting kind of far so we might as well kind of get closer right so this is going to be called update data and basically what that's going to do is set data and we're going to have data and we're going to say return we're going to create a new object and we're going to spread out data there and then we're going to say type is equal to the new data we're actually going to call this new data okay so really what this is doing is saying down here i'm going to give each of these the same update function update is equal to update data so now each of these components has the ability to update its parent data update this giant global object right here not global but parent component object so go down here and now in each of these they have data and update and i'll do this right here right there right there and right there so basically each one of these is going to be have the ability to show data and then we could say button right here and we can say on click or on submit if there's a little form in here we can say right here update and this would be user and new data would be passed in here and this would all be stored kind of in here we could say like const new data is equal to something we would put it in a form all that good stuff we might even put that in uh use state but i didn't really want to get too far into this this is just like a skeleton of what comes next but really what i wanted to do and this is getting ugly huh is to show off hiding and showing components and the ability to kind of progress through those components we have also given each component the ability to update the parent component state so that means all of the state can be held here and then when we do the submit right here we can do function submit we can say fetch where we need to go api slash i don't know form and then we do method is post and we do body is json dot stringify so that would happen on the submit button all the way down here on click is equal to submit okay so now we have go next we have the ability to submit we have all the data right here because it's stored in state i know there's a lot of moving parts here but hopefully this all kind of makes sense and the one last thing i want to do is take this progress bar and let's actually make this a progress bar so we're going to say progress we're going to say max is equal to 4 and we're going to say value is equal to page so let's see what that looks like so you're on page one go next page two go next page three go next page four and then the submit button would actually submit the form so i think this is the easiest way to create a multi-step form you could even add transitions to this which we will do in another video let me know in the comments if you're interested in that video but yeah so i hope this was helpful multi-step forms are a hard problem to solve there's many ways to solve them and there's just so many moving parts it's hard to keep track of sometimes i hope this was helpful this code sandbox link will be down in the description let me know if you want to see the next videos thanks for watching

Channel: Better Dev

Views: 4,646

Rating: 4.876543 out of 5

Keywords: web development, javascript, multi step form, react tutorial, react form, react multi step form

Id: dybbUOmtd0Y

Length: 16min 53sec (1013 seconds)

Published: Mon May 24 2021