Multi Step Form With React & Material UI

[Music] this video is sponsored by Synology and the product I want to recommend is the DiskStation which is a network attached storage device you can use it for storing files streaming media and much more but what I really want to mention is the idea of using it as a development box like I do you can install software like Apache servers get docker content management systems like Drupal and WordPress and much more as you can see the DSM software is just amazing there's different DiskStation models that can hold different storage amounts and they range in price so I'll put a link in the description to the ds9 18 plus which is what I use but I'll also put some others as well so check out the links in the description below hey what's going on guys so I have a front-end react project for you today we're gonna build a step form well at least that's what I'm calling it and you guys have seen this before where you have a website or an application you fill out part of a form you click Next or continue you fill it another part maybe another part and then you can confirm the data that you entered and then submit it and you should be able to go back and edit other parts of the form okay so that's what we're going to be creating we're going to use react with material UI so that we can get this nice-looking the navbar and the the fields here the button and basically I'll just give you a quick demo so first name last name email and we'll go ahead and click continue and it brings us to personal details okay now at any time I can go back and our data is still going to be there because it's being stored in the components State okay basically the parent components state so click continue I'll fill this out oops say bye oh I'll just say this is my bio I'm not gonna do any validation or anything like that if you guys want you can do that but I'll click continue and then it's gonna just show me a confirmation page with all the data I entered now at this point I can still go back I can even go back to the first part and the data is still gonna be there and we're not switching URLs or anything this is all done within react components okay each one of these is a component and we have a piece of state that's going to decide which which should show so continue and once we're done we want to confirm and continue and it brings us to this thank you the success component alright now we're not going to do the back end where we submit to an API or anything like that maybe we can save that for another project this is just gonna be the front end and obviously you can change the form up of course you're the design just you can implement it into your own applications your own projects alright so let's go ahead and get started alright so before we start to write our react code I want to just give you a visualization of how this is going to be structured so basically all these blocks are react components we have a user form component which is basically the parent ok to all of these ones here and this is gonna hold the state it's gonna hold a step which is going to be a number it's gonna be one by default and obviously it'll be like step 1 2 3 4 and then it'll also hold all the fields so we're gonna have like first name last name email all that stuff obviously you can use different fields if you want and then as far as methods we have next step which is going to bring us to the next one's just going to increment whatever the step is previous step will bring us to the you know the one before it and handle change is going to be when we start to enter data into the inputs and it edits the fields of the state that's what handle change is going to do okay so we have the user details as the first step then personal details the confirmation and finally the success now the confirmation this is where you would normally do your your calls to your back end so that you could actually submit the data to do something but we're not going to do that this is strictly front end okay so I just wanted to show you that before we get started now what I'm gonna do let's just open up a new tab here and I have a folder called react step form okay now if you if you're not really familiar with react I have a course called react front to back on you to me it's like I think it's like a nine-hour course or something like that maybe a little more where I explain the basics of react and stuff like that we build a couple little projects so I'd highly recommend that if you don't know anything about react because I'm not going to go over every little detail in this video all right and I'll put the link in the description for that so let's go ahead and use npx what this will do is it'll allow us to use create react app which is the command-line tool to create a react application and it'll allow us to use it without actually installing it globally so let's say create react app and I'm just gonna do dot because I want it to be generated in the current folder this reacts step form folder alright guys so now that that's done before we start the dev server I'm just gonna install our dependency which is material UI so we're gonna say NPM install material - UI and basically what this allows us to do is bring in material design components like buttons lists nav bars things like that we can bring them in and use them as react components ok it's kind of like react strap or react bootstrap only into material design instead of bootstrap all right so now we can run the server let's do NPM start let's see oh I'm already using that on a port didn't realize that all right so I'll just use it on 3001 ok so here we go here's our landing page obviously this is the create create react app version 2.0 landing page so what we're going to do is go into our source oops our source folder here and we need to create a place for our components I'm going to create a folder called components and we might as well just create all the files we're gonna need so one we're gonna use we're gonna need user form Jas that's gonna be kind of the parent component that's where we're going to decide which sub component to display all right let's create another one called form user details Jas okay so that'll be the user details then we'll create another one called form personal details Jas that'll be like the occupation city that stuff and then let's create a confirm dot Jas okay so that'll be the confirmation and let's create a success Jas which will be the success page there should be really simple all right so we'll go to our user form Jas that's basically our like a wrapper our parent component and then we want to create a class-based component okay so I'm using an extension in Visual Studio code which is this right here es seven react Redux graph QL react native snippets which just gives you a bunch of handy snippets so you don't have to type everything out so to create a class-based component we can simply do our c ii tab okay and if you don't have the extension or you're not using vs code just go ahead and type this out it even gives it the name user form because that's what we called the file and that's what i want to call it alright now i think from here we want to create our state okay so this component is gonna have state attached to it state is gonna be an object and this is where we want to put our step which is going to be one by default the rest of the state is just going to be the fields so we're gonna say like first name which will be an empty string oops wanting empty string and then let's do lastname let's see we're gonna have a couple more so first name last name let's do email let's do occupation let's do city and let's do bio okay so those are our fields and that's our state now I think before we get into the rendering we should create our next step in previous step methods so this component is gonna have a method to proceed to the next step so let's say next step we're gonna use an arrow function okay so we just want to go like that and I'm going to take the step out of the state using D structuring so we want to put some curly braces here and say step and we're pulling that out of this dot state okay we define the step in the state right here we're just pulling it out putting into a variable it's called D structuring and then we just want to set the state so we can do this dot set state okay and then whatever we want to change in the state we want to put here as the key which is the step and we just want to increment it so we're going to say step plus one alright so that will bring us to the next step now I'm gonna copy this because previous step is pretty much the same thing we're gonna say go back to previous step and we're going to rename this brief step except we just want to change the plus to a minus because we want to go back one alright and that's it now we want one more method which is to handle these will say handle fields change okay because each input will have its own state our own piece of state which would be this stuff here and every time we edit an input that stuff will change and that's what this is going to do so call it handle change and it's gonna take in input and I'm gonna use an arrow we're also going to have an event parameter attached to this and another arrow and then we want to set the state so this dot set state and we want to take whatever the input is and we want to set it to whatever the value is and we can get that using that event parameter and then using target dot value okay so whatever the value is that'll be set whether it's the first name last name email whatever is entered and that will handle all of the fields okay so that's it for the methods now let's go down to the render and what we want to do here is is figure out what step are on and depending on which step are on that's going to decide which component we want to display okay but we need to do a couple things before we deal with that so first of all I'm gonna pull the step out of the state by destructuring saying step equals this dot state K that'll pull that out I also want to pull out all the fields so for instance we have first name last name email occupation city and what else bio okay we want to pull that stuff out of the state as well okay I could have put step in here and got rid of this but I think this is this is a little cleaner now I also want a variable call values and values is just going to be just that basically what I just did here so I'm gonna just grab all this stuff and paste that in that way we can pass the values into each component okay so that we can render those values in the inputs so next thing we want to do is we're not gonna just have one return we're gonna have a switch statement here all right so let's say switch and let's put in the step because that's what we're looking at we want to make a case for you know each number so let's say case 1 so if it's case one then we want to return oops want to return the form user details component remember that's where it asks for your first name last name email now we haven't created that component yet or anything like that so this will fail but I'm just gonna put it in and then we'll create it so let's say form whoops form user details okay and it's gonna take in a couple props when you add attributes to a component those are props and we need to do that because we need to access next step we need to access well not previous step in this particular one because there is no previous but we also need to access handle change way that we do that is with props so we're gonna go ahead and say next step equals this dot next step which we'll call this method right here and then increase the step or increment the step by one we also want to add handle change and we want to set that equal to this dot handle change oops okay and then the final thing we want to pass in as a prop is the values so we'll just say equals values and that's this stuff here all right now I'm gonna do the other cases so let's go below this return and let's say case - all right now instead of returning the actual component just for now I'm going to return an h1 with the name of the component and we'll get to that later I want to focus on the first one for our souls they form personal details all right case two let's do case three and it'll say return h1 it's not letting me do let me just copy this back alright so this is actually case 3 is gonna be to confirm ok and then we need to tab this over all right so let's grab this and let's go ahead and copy that down and this will be case 4 in case 4 is gonna be the success ok and then that's it those are all of our cases now of course if you wanted more steps and more you know form parts you could do that you could create other components and you could do that but this is good for now this form user details we're gonna bring in even though we haven't created it yet so we're gonna go up to the top here and let's say import form user details from and that's just going to be in the same folder and then form user details ok so we'll save that now in our app J S which is just like our entry point I'm gonna go ahead and get rid of this logo I'm going to get rid of everything let's see let's get rid of everything that's inside this div with the class of app so basically the header that's this stuff here and I just want to put in our user form component okay which I have to bring in I already did them so we want to just we just want to display our user form component so I'm going to save this and we're gonna get an error because check the render of user form and it's because in our render of user form we're trying to render a component that doesn't exist yet which is just form user details all right so wait a minute export default user form yeah so yeah it's saying that he forgot to export your component we didn't even create the component so let's go to form user detail and let's create a class-based component I'm gonna do our seee tab and just for now let's just do like an h1 and we'll say hello just to make whoops don't want that double cursor let's get rid of that alright so we'll just say hello from user details just to make sure that it renders so let's save that and there we go so we know that we're rendering form user details okay and that's that's correct because this is the first this is the first step so let's see we're gonna be using material UI so we need to bring in a few things the first thing we're gonna bring in is the mui the material UI theme provider and that's basically a wrapper for everything that we're going to do everything that we're going to include so let's say import actually we can do with the extension I'm using I can do i MP tab and it'll just do this for us and I'm going to change this to material UI see material - UI / styles /m UI theme provider okay so we want to bring that in and then we're gonna use the app bar which which is basically like a navbar just for looks there's really no functionality to it so I can do i MP tab and this is gonna come from material UI / app bar okay so let's see next thing is gonna be the text field because each text field is gonna be material I UI components so let's say material UI slash slash text field alright and then the last thing we want to bring in is raised button so UI / raised button which is right here all right so these are the things that we're going to use and I need to change all these module names so this first one will be Mui theme provider this one will be app bar this one text field and this one raised button so now in our class right here we're gonna have one method other than render and that's going to be called continue okay so we're gonna say continue and that'll take in an event parameter I'm gonna use an arrow function we want to prevent the default so prevent default and then we just want to call the next step function of or is its in user form so next step right here okay so we're just gonna say this dot props because remember we passed it in its props and we can call next step like that okay so now let's get to our render now remember we passed in and just close this up we'll close all these up except for the two we need so and use a form when we when we rendered form user details we passed in the values okay so I'm going to go right above the return and I'm going to use a little D structuring and just pull those values from the props okay because it's it's in the props so we could access it with this thought prop stock values but by me doing this I'm just pulling it out so that I can use values as a variable all right and then in the return we actually want to wrap everything in that Mui theme provider like that instead of this div oops so Mui theme provider now the theme provider this has to have just one element it's not like we can do like multiple text fields inside here we have to put those inside a single element we could use like a div but I'm just going to use a react fragment which is like like a fake Dom element so just say react dot fragments okay oops I didn't want to do that there we go all right so in this reaction in this theme provider first thing I want is the app bar so let's say app bar and it takes in a title prop like that so title I'm gonna say enter user details and let's save that and there you go we have our app bar okay now we want our text fields so remember we brought in text field as a component so let's say text text field okay and this is gonna take in a couple things so one is going to be the hint text and we're gonna set that to just enter your first name okay so that's our hint text like the label then we have the floating label text it's floating label text which will just be first name now the way we react works is every time the text text field changes like every time we type in it it's gonna fire off an event or we want to fire off an event of on change and we're gonna have that call this dot props dot handled she actually you know what we could do is pull that out of props up here so handle change you'll pull that out and then we don't have to do this dot props okay so we'll say handle change and the field is gonna be first name or the input remember when we look at handle change up here it takes in an input it needs to know which field it's actually changing okay in a way that we're able to call this is by passing one passing in handle changes a prop here and then calling the the function up here okay and then we're calling it from here so that's our first text field now it'll do actually we want to do one more thing and that's add a default value because we want our text whatever is entered to stay there so that's gonna be values dot and then whatever the field which is first name in this case let me just save that okay good so I'm gonna copy text field and I'm just gonna put a line break under it and then paste that in let's do another line break and paste that in one more time so the next one is gonna be last name so I'm just gonna select these two and say last name and then let's say handle change for a last name and values dot last name all right and then this one here is gonna be the email so we'll say enter your email okay let's get rid of that say email and this will be email and values dot email okay so next thing we need is our button so let's put another line break in here and this is gonna be the raised button that we brought in so let's say raised button and this is gonna take in a couple things so one is gonna be the label which is just the text that's displayed and it's gonna say continue because remember this is the first step I'm gonna set primary this this has to do with the color display I'm gonna set that to true that'll make it a blue color I also want to add some margin so I'm gonna actually add a styles attribute I mean a style attribute and I'm gonna set this to let say Styles dot button and then down here under everything I'm just gonna create a variable called styles and let's set that to some parentheses and then we'll have a button style all right we'll just set margin to 15 okay and then the final thing we want is the actual you know what happens when we click this so we want it on click event we want to set that to this dot continue okay which we put above and all continue does is call next step of user form and we do that through props okay so hopefully that makes sense so let's save this and let's just see what happens if we just enter something in here I click continue and it goes to form personal details which is exactly what we want and the reason it does that is because it calls next step which brings it to step two and if we look at our switch case two is just going to give us that h1 okay so that's that's what's going on so the next thing we need to do is create this form personal details so when we enter something in here it should get added to the user form state so what I'm going to do is open up our react tools let's let's move this stuff down and let's go to react all right so I want to look at the user form state and you can see first name has whatever I typed in if I go to last name type it in email so we know that every time we type something in here it's getting added to the user form state to the stuff up here which is exactly what should be happening all right so now let's let's actually copy everything that's in form user details and let's go to form personal details and paste that in okay so this is just basically the same thing just different fields so we want to change the name of the component to personal details make sure you export it down here is form personal details let's see we're gonna have continued but we also want a back method because we want to be able to go back to the DITA user details so I'm gonna copy this and let's change this to back and try to think try to if you're new and and this is a little confusing try to guess what we're gonna do here alright if you want to take a second or pause it if we go to user form remember to go back a step we have previous step right or pre step so what we want to do is just simply call this dot props dot brief step now we haven't actually embedded this component here yet which we're going to do but when we do we also have to put brief step in addition to next step all right I'm gonna close up the user details for now so let's go down here and then and handle the rest of this so let's say enter personal details and we have our occupation so I'll say enter occupation and unchanged occupation let's get rid of that all right so that's the occupation next we have what the city so enter your Stu city and oops I'm sorry guys city so this will be values dot city here alright and then we have what bio so enter your bio bio keep doing that and this will be values dot bio all right now let's see in addition to the continue button which can say the exact same it's just going to call this stock continue which we have up here we also want a back button so let's copy the raised button and let's put one right underneath and let's set the label to back and instead of the stock continue we're gonna call this stock back and also going to change the color so I'm going to set primary to false which will make it like a white so I'll do that I'll save that and then we need to go back to user form we need to actually bring this in so up top here we want to bring in form personal details and then down here we want to embed it in its in case - right because it's the second step so I'm gonna copy this actually you know we'll just copy the whole returned and replace this okay make sure this is tabbed over and this is gonna be form personal details and like I said in addition to next step we need to have pre steps so let's grab that we'll go ahead and copy that down and change that to prove step that way we can go back we still want these two and that should be good so let's save all right now what I'm gonna do is try this out so if I say Brad Travis see test test com let's say continue brings us to the next step now if I go back that data is still there because it's stored in the state of user form okay hopefully that makes sense and if I start to type in here let me just open up my react tools okay and we'll look at user form because that's where the state is and you can see that the initial stuff is there we're on step two if I start to type in here that stuff gets filled in okay so to the user it looks like we're going through different pages you know like like different entire URLs but we're not we're just we're just operating within you know the react components depending on what step are on so that should be good for that now the confirm we're gonna deal with that now so let's see we're going to just copy from the user details again I'm just gonna grab it all going to confirm and paste that in now let's see what do we need here this is gonna be a little different we're going to use the app bar the theme provider raised button we don't need text field but what we do need is a list and a list item so we'll say import list and list item and it's gonna be from material UI slash list now down here this continue we're going to keep this here because we still want to go to the next step which would be the success page now this is probably where you would process your form and what I mean by that is send your data to your your API whatever that may be it may be you know Express or I don't know flask or Python PHP it could be any any kind of backend language or framework this is probably where you would do that or at least have a method that would do that but but that's that's the back end we're not dealing with that maybe we can add that in another video now down here let's see we want to pull out a bunch of stuff from props we don't need handle change props actually let's see if we look at actually we haven't even we haven't even embedded it yet so why don't we do that first let's replace this with the actual the actual component so we're gonna bring in confirm up above here so confirm from confirm and then for a case three let's go ahead and we're just gonna copy this return and paste that in now confirm is also gonna have a previous step one thing we don't need those handle change because there's no inputs we're not actually changing any any fields in the state so we just need next step in previous step alright and if I save that we're just gonna get an error here let's go to confirm and it's just complaining about these text fields because we didn't actually bring in text field that's all going to change so I want to pull out all the values can't remember values are are in the prom props so I'm going to see the way that we can do this is by saying Const let's say values : and then whatever the values so first name email hockey whoops occupation city and bio and we're pulling that out of the props okay which is in values so now we can just use these variables so I'm gonna get rid of I'm gonna keep the app bar but I'm gonna change it to confirm let's just say let's they confirm user data and then we're gonna get rid of all these text fields we don't need those oops okay keep the button but we're gonna get rid of the text fields and now we want to list okay so we just want to say the list and inside here what we want is a list item okay now list item is going to have two things the way that we're going to do this is is it's going to have primary text which is going to be the label oopss should be in equals this is going to be the label which is going to be first name okay and then we're gonna have secondary text which is going to be the what I keep doing that this is going to be the actual data which we're going to get from the variable of first name because we pulled that out of the values and the props up top okay so I'm just going to copy this list item because we have one for each so let's do that's first name last name email occupation city bio okay then we're just going to change these up so that's gonna be last name last name this one email okay this one is going to be occupation okay what else city and bio okay so those are our list items now as far as the continue button let's actually change the label to confirm will say confirm and continue and that's going to call let's see yeah that's going to call this thought continue which we have up here now we also want a back button so I'm gonna copy that from the personal details because there is a back button there so I'm gonna just grab that and go back to confirm and paste that right underneath that's gonna call this dot back which we actually don't have so I'm gonna copy that from the personal details as well so grab that because if we could if we're looking at the confirm page and there's an error and something we typed you want to be able to go back and I think that should do it so let's save this and let's try it out so continue we can go back see our data continued occupation just hello and continue handle change is not a function okay so [Music] hold on a second here it's talking about this and it'll change is not a function that we not pass it in so handle change this dot handle change huh oh I have form personal details twice and notice this one doesn't have the handle change so it's looking at this one this should actually be confirm that's the issue here okay so let's try this again we'll save that and I'll just put anything alright so if I go continue good so brings us to confirm it has all of our data I should be able to go back back again I can change the data if I want continue continue now you see Brad good so so far so good so now case four is gonna be these success which is gonna be very simple let's just bring that in we'll create it in a second but let's bring it in so this will be success success and then down here in case four we want to load success and it's actually not even going to have any for any prop so we can just simply say return success like that it's just gonna be basically a static page so let's go to success Jas and I'm still going to use the material theme so I will copy let's just copy confirm I guess and paste that in we're going to change we're actually going to get rid of everything except the app bar and the theme provider and of course react and change this to success make sure we change the export to success we're not going to need this there's no buttons we're gonna get rid of everything that's in the react fragment except for the app bar okay so the appbar title let's just say success and then we'll just simply put an h1 and we'll say thank you for your submission and we'll do a paragraph and we'll say you will get an email with further instructions okay so just a simple success page and we should be good so let's try it out okay continue so this is all of our data that we've added confirm and continue cannot read property first name of undefined and that's because I left this here we didn't pass values in because there's no need to so let's just try it again with just real quick continue confirm and there we go so there was there's a success component alright guys so that is it hopefully you enjoyed this and hopefully you can use it in some of your projects where you want to have you know multi-tiered forms or whatever multi-step forms you see it quite a bit in website so that's it thanks for watching guys if you like this please leave it a like and again I do have a react front to back course if you're interested and I'll put that link in the description below so I just want to do a quick shout out to one of my most loyal patrons Carlos Miele who has his own YouTube channel actually where he creates videos on different web development topics such as JavaScript react get some DevOps stuff really interesting channels so check them out I'll put a link in the description below as well as a link to my patreon if you want to read more about that and become a patron

Channel: Traversy Media

Views: 388,491

Rating: 4.9448628 out of 5

Keywords: react, react form, multi step form, react javascript, javascript, material UI, react material ui

Id: zT62eVxShsY

Length: 43min 58sec (2638 seconds)

Published: Mon Nov 05 2018