ReactJS Multi-Step Form Tutorial - React Hooks Tutorial

hey guys how's it going i'm back here with another video and today i decided to bring this video which i feel like a lot of you guys have requested me in the past which is on how to create a multi-step form in react gs now as always i will be focusing primarily on the like the the logic aspect of stuff i don't care that much about the appearance but um just so you guys can get an idea this is basically what i built um all the css will be in the description i won't be actually going over the css since the focus is working with the react part of the project however if you're just interested in getting the code it's going to be in the description but basically what we're going to build is the following it's just a little signup page over here and you're able to put some information and there's multi steps like multiple steps to this form right and there's different ways to um like to portray the multitude of the steps um but i decided to go with the progress bar as you can see over here so i'm in the sign up page so i can put over here like some sort of email um as you can see i can put a password like one two three and another password and click next and now i'm in the next step of the form there's only three steps on this one but you can definitely add more i'll put my name um my last name my username and basically um it's just it just goes forward and at the end which is the last step i didn't really know what to put here but um i put this over here and you can just put other stuff and you can click on submit i'm not gonna click on submit yet because i just wanted to show you guys the information gets saved so like if you go back on the steps you can see that each of the stuff each of the values in the inputs are saved and at the end you see this button change to a submit button you can just click on it and for now we just say it just says like form submitted but here's the part where you would put your whatever you want to do with submitting the form so this is basically what we're going to build before we get into the video if you guys could leave a like and subscribe i would massively appreciate it because it would help push my videos to more people we've hit 30 000 subscribers and that's honestly crazy i i couldn't be more proud of of my community of my channel and i really wanted to thank you guys but if you guys could just leave a like help promote the video i'll be really happy with that in mind let's get into the tutorial [Music] [Applause] [Music] okay everyone so as you can see over here um i have a an application a react application open into my computer um i basically didn't do anything i just ran create react app i deleted some of the files like the setup test the report like the web vitals file um and the index.css file these are the three ones that i left um it doesn't really matter um which files you use or not we're not going to be focusing on them but the first thing i really want to do is i want to create a folder inside of my srs or instead of my source folder called components and i will separate my project into a good amount of components and the first one will be called a form component so i'll call it form.ges and this component will exist for the purpose of managing the whole form so what do i mean by that um basically we're going to have a form right with multiple steps and this will just be the container of all the steps so basically this should just be the component which will store most of our information so what we're going to do with this is for now let's just write something like form over here and inside of our app.js we want to import the form component from the dot slash components folder slash form path and what we'll just do is we'll just uh instantiate this component over here so that um it's actually rendering inside of our project our form component as you can see now inside of a form component what we really want to do is the following we want to start out by dividing this component into a few different things the first one is and i'll divide them um giving them class names and as i mentioned i won't be showing you guys the css but i need to give the the html elements class names so that when the css is added it will work out so the way we structure this is i'll have a div called um just form this will be the div around everything then inside i'll divide this into two different things first will be a div for the progress bar so i'll just give it a class name of um progress bar or whatever we want to call i'll just call it progress bar like this and then i'll have a div for the form container so like the actual form appearing um for the user so i'll say form container and um if you saw um in the beginning the form is kind of divided like each page is kind of divided into three different things the header which is just the title of the the step then the body which is like all the inputs and stuff and the footer which is um the two buttons the previous and next button so i want to divide it the same way i'll come over here and i'll just put a div and give it a class name of header then i'll do the same thing for the body and the footer so body and also footer like this and um we can start adding some elements to them for example um for the footer we really just want to have um the two buttons inside of here so for now i'll just add two buttons um one will say pref and one will say next and obviously it won't have any impact right now but um we'll as we add our elements you'll see how it works out now we really need to handle um the different steps that we're going to have in our project right um if you recall my example i had three steps but you can have multiple you can have more you can have two you can have how many ones and um in my case they're kind of specific for example i have first um a step which you put sign up information then the second step you put personal information and then at the end i just couldn't come up with something else so i just called it other information like you just put other stuff so i want to create three different components over here one for each step so i'll call that the first one sign up info dot gs then um i'll just create the component as you can see right here and i'll just create one for the personal information so personal info personal info dot yes and then finally for the other right so i'll just call it author info dot ges and i'll create the component for each one of them um and i'll create one for this as well if you're if you want to know what snippets i'm using to auto generate the component um i'll leave a link for it in the description just click on that and download it for your vs code and you can auto generate stuff like this so over here i'll just close both of them like all of them and what we really want to have is um each of them will represent the the body of um each like step right so they will just include like instead of each of these components it will include just the inputs and all this the stuff related to that step of the form now the way we want to manage this is by coming here at the top and in our form we want to determine um which step we are in by using a state so i'll create i'll call a use state um i'll import new state from react and i want to create something called a state which will be called page and for if you're not familiar with states i have videos on states um if you want to check it out but basically it will just be a variable that will keep track of which step of our form we are in we can call it step as well i like to call it page but basically it will just hold like if you're in the first page or the second page or in the last page so i'll call it page and i'll call the function to mutate this variable called set page now set it equal to use state and it will be a number which we want to start at zero meaning that um it will be the first we want to start our form right at the first step or the first page which will be the sign up info in our case and what we want to do for now is we also want to keep track of the titles right so each step or each of these pages they have a title um if you recall in the beginning one has the personal info title the other one has the sign up info then the other info just says like sign a page personal page or author as well that's those are the titles you can do this in many ways the way i like to do this is just by having an array over here so i'll just create an array as you can see calling it form titles and set it equal to just an array with the titles so for the first page it will include i'll just say the title will be signed up then for the second one it will just be personal information or personal info and the last title will be other so this is just a title that will appear at the top of the form and what we really want to do is we want to display this title based on which page we're in so i'll put this over here form titles inside of the header because where we want to display the title so i'll just say that inside of the header i want to have an h1 tag which will show um the element in the form titles array based on which page we are in so for example if page is equal to 0 i want to show the title sign up if it's equal to 1 we want to show this one and if it's equal to this we'll show this one so we can dynamically change the title in the form based on which page or which step of the form we are in so i'll just say form titles and i'll put page over here and you should see that initially it should say sign up but if page it says signup because we define the state to start at zero if it started at one it would be personal info as you can see over here and it's looking great um i wanna just center this so you guys can see it a little bit better actually i'll just zoom in a little bit so you guys can see it's pretty zoomed in but you guys can see it a little bit better now um so what i want to do is now that i have this i want to start making the buttons work and what i mean by that is if i click on the next button i want to move next and if i click on the pref button i want to move to the left well how do we do that it's pretty simple all we do is just come over here and add an on click to this and we write a function inside of here which basically determines if we want to move right or left if we click on the next button we want to increment the page state plus one so the way we do this is we say set page then we grab the previous page so i'll just call it her page let's just call this variable car page and we just set it equal to um curve page plus one all we're doing here is we're saying that when you click on this button we want to change the page state to be equal to whatever it was before plus one meaning that we're moving forward to the right and since the form titles is dynamically changing based on which value of the page it is if page becomes one instead of zero it should show personal info which is exactly what happens and we can keep clicking but if we get to author and we click next it will break the reason why we break is because there is no like the page value now is bigger than the amount of elements in this array so what we want to do for now is we want to say that this button will be disabled um if page value is equal to um two or two because in our case we we have three elements in the array or we can just say that if it is equal to um form titles dot um length so the the length of the the amount of steps we have minus one so that's what we do for so we can't click on the next button when we get to the last one you see it's disabled right but we can click to the prev one although we haven't put the on click functionality yet so for the on click for the previous one pretty much the same thing i'll just copy on the on click and paste it over here only difference is instead of being plus one it should be minus one and also this bit the disabled part i'll put it here as well and the only difference in this case is we don't want to disable the pref one if it's on the last element or in the last step we want to disable it if it is on the first one because you can't go to the left right if you're in the first element you can go to the left and you can see that now it's working perfectly you can keep going to the right um until you reach the end and keep going to the left until you are in the beginning so this is kind of how we're going to work with it however we still haven't um displayed any of the components that we created so what can we do for now i'll just put here um something for like something to distinguish them so you guys can see um so for the personal win for one i'll just write uh personal whatever i'll just write personal for the other one i'll just write author and for the sign up i'll just write sign up like this and i'll close the components and what i want to do now is i want to write some sort of um logic that will determine which ones we want to display which components we want to display inside of this body div well one good thing about react is that um you can create functions that return html those are known as components but what you can do inside of here is instead of every component you can just create a function that does that and it's in itself so for example if i want to display the form i can create a function called page display for example and i'm just giving it capital letters initially because that's how i like to call functions that usually um like this return html instead of um just like normal javascript logic um this isn't standard you can do whatever you want um but this is how i like to do it basically this function will be a normal function but at the end it will check to see which page we're in and it will return a component based on that so what do i mean by that well over here right now if i say return um h1 hello world you should see that if i call this page display instead of this body like this and i actually call the function it should display hello world no matter where we are it'll show hello world because we're calling the function inside of here which returns this so all it gets is this over here but what we want is we want to display based on which page we're in so what i want to do is i want to say if page is equal to 0 then we want to display the sign up component because it is the signup component is the first one right so i'll just say return sign up info and this is the component that we want however we need to import this um from from the components folder over here so the way we do this is um we basically come over here and we just import sign up info from dot slash sign up info and we'll just use this over here then we just say else if and if the page is equal to one which isn't zero so it's a second one so i'll just say one over here then we want to return the personal info component so i'll just copy this import the personal info one like this personal info and just return personal info as a component and then finally if it isn't both of them then it must be the other component it must be the third step so just return the component called other and i also need to import it so i'll just come over here at the top and i'll just say that i want to import other from other like this other info actually so i should probably call this other info like this um so what we're doing right now is we're just saying that in the body we're going to display whatever this function page display returns and it returns based on which page we're in so if you're in the first page it should return the sign up info form if we're in the second one it should return the personal info form and if we're in the third one it should return the last form so we can check to see if this is working because each component of them has different um text right the other one says other the other one says the personal one says personal and the sign up one says sign up so what i want to see is that in the first one it says sign up the second one it says personal and the third one it says other and if you keep going from one to another now um it means it's working so i want to add the skeleton for each of this um for each of this forms right so i want to add the inputs for the sign up the inputs for the personal one and the inputs for the author and then i'll put in the css that i have pre-made so it kind of looks like a form because right now it doesn't look like a form at all and um we can see how it looks and then make the final changes to it so what we want to do is i want to come over here into one of the components so in our case we want to come to the signup component and i just want to add some of the inputs that i want in this component so for the sign up component what i want to do is i just want to add a class name over here in the div and just differentiate from the other components so i'll call it sign up compo container like this and um what i want to do is i want to put the inputs inside of here so let's just add a simple input over here for email so i'll say input of type text then i'll put the placeholder for it to be um just seeing like something like email to to let the user know that this is the email um field and you should see that on this one we now see the email so i'll add inputs for the password and the confirm password and you can see so password confirm password and you should see that um now they should appear um obviously css will make it them stack on top of each other but for now this is good and i can alternate between them and the fields change completely now that i showed you guys what to do with this inputs i'll just add the forms for the other two just to not make this video super long and come back in a second to show you guys okay everyone so i just added all of the other forms you can see that similar to the sign up one um for the personal info we have three inputs first name last name and username and we also changed the class name to to be something related to this component then for the other info we do the same thing i just put two inputs on this one because i couldn't come up with an example better but yeah this should fit in to whatever you guys have to do um and not be exactly the same as i'm doing because it doesn't make sense for you your guess is like purpose but um in this case you can see um i just add inputs for each one of them now you can see that when i come over here um and i alternate now we have different forms for each page which is amazing i decided that now i will just put in some of the css so you guys can see um how it looks um like how similar it looks now to the final product but again check out the css code in the description so you guys can kinda do the same um if you want to you don't really need to you can just style this however you want um if you're just here for the like the the logic behind creating this form but i'm gonna add the css and i'll be back in a second okay everyone so with a simple uh ctrl c ctrl v um it already looks a lot better and a lot similar to what um the final product looks like now you can see that the progress bar also is over here but it's not currently working like i can go through the pages but it doesn't actually change um the progress bar is just uh as you can see the let me come over here it's basically just a div that will be progressively filling up um with a span inside of it so you'll see what what i mean by that but um basically i just added all of that css inside of this app.css file it's a lot of css that i wrote um and you can just check it out in the description so for the progress bar which is one one thing that we really want to do right now um all we have to do is the following i'll put a a span or a div actually it doesn't matter what you want to put but i'll just put a div over here um inside of this progress bar and basically what i did is the the progress bar above as um this over here is just a white rectangle the size of the progress bar and the div inside of it will be dynamically changing its width so that it fills up so how do i dynamically change its width well with css you can just give percentages so i'll just say that when you're in the first page it is 33.3 of the page or and it is 33 because um we have only three forms um but basically um you'll just say that it's one third of the way through then when we click the next button and we're in this page then it is it fills up now 66 of the div the rectangle and at the end it fills up 100 so how do we do that right now it just fills in the initial ones but we're not dynamically changing well the way we do this is the following we'll come over here to this div we'll give a style directly into a in react in in our jsx and we'll just say that the width of this will be equal to the following if the page is equal to zero then i want to make it equal to 33.3 percent right because it makes sense that's what i mentioned before if it is the first page you only want to fill in 33 of it well if it is not the first page then now we need to ask two more things now the first page is it's the second page because if it is then i want to fill in 66.6 percent right but if it's not the sac of the first page or the second page then we can just put an else like an l statement and say that we want to fill in um a hundred percent of the div well if you're not familiar with the ternary operators this might seem super confusing to you but basically with ternary operators we just say if this then do this else do this so in our case we're saying if page is equal to 0 then we want it to be 33 else check to see if the page is equal to one because if it is then 66 but if it's not a hundred percent and we can see that this works because in the signup page it fills in 33 of the progress bar in the next one 66 and in the last one a hundred percent can keep going backwards and forwards and it fills in perfectly so if you want to have something differently from a progress bar like um i don't know a couple you're just like a number or something like over here at the top you can dynamically change based on the page and this is the point that i really wanted to show you guys this is a piece of logic that is used in many different things including for example creating carol cells or any other things you want to do in your react applications but i just wanted to really show you guys this because i feel like it is something that you can reuse for many different use cases so now that we have this set up um i feel like what we have to do now is just um make it so that when you write something because right now if i write something over here and i go forward you can see that if i come back it's not there anymore especially because we're not keeping track of what the user is writing so the only way of doing this is by using states to store the the values of what the user is writing in the inputs so how exactly would we do that well i want to know what the user wrote in the sign up info inputs when i am in the other info input right when i'm over here i want to keep track of what the user is writing for each of the inputs in each of the forms so we need to find sort of way to hold all of that information in a single place and there's many different ways of doing this um you can use some sort of state management library to to like hold the values of the states and all you can just redux you can use the context api i don't find it that useful for this case because i feel like it would be just um over engineering something that can be used can be done a lot simpler and the way i like to do this is the following i will come over here and i'll create another state so const and i'll call it form data and remember this is on the form component which calls all the other components it needs to be on the parent one the highest level component that calls all the other ones and we're going to say set form data and set it equal to use state and over here this is going to be an object this object will start out with all of the different inputs or all the different fields that we want to keep track of the information so for example in our case we have three forms but in each form we grab different pieces of information on the first one we want to know the email the password and the confirmed password so i'll just say over here that initially this form data will be an object with the fields email my email will be empty then password my password will be empty and i wrote password wrong and then finally confirm password and it will be empty as well so what i want you guys to do is to go through every one of the inputs over here on each of the forms and just give like come to the state that we're creating and add a new field for that input and set it equal to its empty value now all of our inputs are text inputs so that's why the empty values are text but if you grab some sort of information like age make sure you put a zero instead of an empty string because that will be the initial value for the input now i'm going to do this real quick and come back in a second you guys should do the same thing okay so as you can see we have here one for email one for password one for confirm password one for first name last name username nationality and other which are all the fields that we have in our multi-step form now why is this useful well because what i can do is i want to i can come into one of the forms like i'll come to the sign up one and i can just say that if um someone write in this input i want to alter the form data to hold that information but to do that i need to access this um form data variable over here and the set form data function inside of the signupinfo.js and also inside of all the other components as well so what i want to do is i want to say that this component take in two props the first part will be the form data state and the second prop will be the set form data function why do we need both well because um if i want the email for example to be to be set to like if i move over here and i come back and i want to see the the the value that i had here before to be the same the way i do this is basically i just give it a value and i set it equal to form data dot email so whatever we are storing as whatever the user wrote in that emails part of the the form data that will be the value and you can see that right now it won't show anything because we're not even passing um for the sanity for both states so i'll just pass it over here form data is equal to form data and set form data is equal to set form date you should see that if i do this and right now it doesn't say anything but if i alter the initial state for email and i give it something like this no it's not an email but you can see now it's like this and if i move forward and come back it's still here so it's not like changing if i go to the other steps which is what we want so the only thing we need to change now is to populate this instead of random letters with whatever the user was writing inside of the input so for that we just use the set form data and say that on change whenever there's a change to this input i want to call the function which takes in um like an event over here and it sets the form data and this is a pretty complicated thing so i just want to just wanted you guys to pay attention to this basically when there's any changes to this input i want to set the form data to be exactly what it was before because form data is an object with a bunch of fields and i only want to alter a single one of them so the way we do this is we say that i want to keep it the same as it was before by saying dot form data but then i want to change the email field and set it equal to whatever the user is writing on the current um inputs so this is how you alter a single field in a state that is an object so if i write on the email one i write like i don't know pedro at gmail.com and i go to the next one or even to the less app if i come back to the first one pedro gmail.com is still there which is amazing means it's working so this is kind of the flow of what you need to do for each of the inputs you need to set its value to be what value it is in the form data state and we need to change that state based on if you're writing on the input so i'll copy this and i'll paste it on the password and the confirm password as well and change it based on whichever input it is so it is the password one so i need to write here password and i'll pass i'll change the password field instead of the email one and i'll do the same thing for this one confirm password and this will be confirmed password now that we did for all of these inputs over here um so i can do this i can put the same password um as you can see and i can move to the next ones and come back and they will all still be there now it's pretty much just doing the same thing now with the other steps so i'll just do the same thing for the personal info component and for the other component and i'll be back in a second remember that to do that um you need to import the state like this at the top um so for example for the personal info one i do need to import the state at the top and make sure that i also pass this information or the states as prompts um to that component so do that to your components um i'll be doing that to the other one as well and i'll be back in a second with this done okay so i'm back and as you can see um i did the same thing for the personal info.js component and the other info.js component i literally did the same things for each of the inputs and uh in the form.js i just imported the i just passed this props um the same states that i did for the sign up one and now as you can see it is working perfectly i can just put information i'm not going to put actual information i'm just going to write stuff but you can see that it's saved like if i go to the last one i can come back and alter the form and everything that i wrote is saved which is amazing now the final thing that we really want to do is be able to submit this form um i'm not going to submit it to an api or anything like that you do whatever makes sense for you but what i want to do is i want to get to the end of the form and when i get to the end i want this little button over here to change from saying next to saying submit and when i click on it it does something so the way we do this is i'll come here and instead of our button next instead of displaying the word next at all times i want to actually conditionally render this based on the value of page now we know that page is the state which determines which page we're in so if page is on the last page so if page is equal to um so page is equal to um form titles which is the array we have the length minus one which means we are in the last page then i want to say that i basically just want to display in the button the word submit but if it's not then i want to display the word next and as you can see this dynamically changes really well um if i'm not in the last page it says next if i'm the last one it says submit but right now i can click on this button because we disabled it as you can see over here so i don't want to disable it anymore if we're in the last one we don't move forward instead of that um we'll just ask on our on click over here if we are in the last one so i'll say if um if we are in the last page then i want to do something else i just want to increment right because that makes sense the button will do two things differently depending on which page they're in and the one that we want to do when um we're in the last page is for now just alert a message saying something like form submitted like this and you can see that i can do that pretty well and it says form submitted now do you really want to see if it actually kept track of the data that we wrote well to see that i i can just console log that data over here but as i told you um here is where you would do something like actually sending the form data to an api or something like that um but as you can see if i just say console.log form data and i actually i refresh the page and actually put information like pedro gmail.com let's call the password password and do the same thing for the confirm password um click next i'll just put the name pedro last name machado username pedro tech then i'll put my national nationality brazilian and author i'll just put whatever if i open my console log over here um you guys should see that if i click submit it should say it should include the object that we created so you can see that it did include with all the data that we inputted in our inputs so that's basically it remember that all of the code for this will be in the description again i didn't want to focus on the css i just wanted to focus on the logic but if you want to take a look at the css it will also be in the description if you enjoyed the video please leave a like down below and comment what you want to see next subscribe because i'm posting two times a week and i'll massively appreciate if you guys can support the channel and yeah that's basically it i really hope you guys enjoyed it and i see you guys next time [Music] [Applause] [Music] you

Channel: PedroTech

Views: 5,408

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react forms, form in react, multi step form, react multi step form, form tutorial, react hooks, react form tutorial, web development, react javascript

Id: wOxP4k9f5rk

Length: 35min 49sec (2149 seconds)

Published: Tue Nov 09 2021