Multi Step Form With React

[Music] hello everyone so welcome back if you watch my previous video we have already created dynamic form with react and in this video we are going to just still play around with form but now we are going to create multi-step form and as you can see in here this is the final project and this is the names form let's fill all this field right here so let's say chant last name death nickname john and down here we have next button if i click that it should be go to the address form of course we can go back in names form as well all right so in address right here let's say my address cd to say my cd state my state zip one two three one two three and let's click next now we on contacts form okay so i'm gonna put my real port number so you can contact me okay just call me guys all right so for the email let's say john at dev.com let's click next now we under review your data in here we have three accordion names address and contacts if i click names now we have all that information that we have already assigned in names form that's for the co that's for the address and the contacts as well all right so for example i want to add a text to maybe stay right here i'm going to change us and when i click next next now that's updated all right of course you can update the first name and last name you can do that as well i'm going to say john doe nickname joe and click next next next now there's update if i click the submit button right here now we have thank you for submitting we will be in touch and as you can see in the console right here we have the all that information that we have already sent all right so and we're gonna use package called react hooks helper and we're gonna learn that in a second so first thing what we are going to do is uh i'm gonna stop the final project and let's create a folder called multi-step form and in here you can generate create react app you can just say npx create react app and dot that will be generated react application in this current folder all right let's run the app you can say yarn star and let's remove couple file in here i'm going to remove the css the app.test.js as well and the logo as well so let's go to index we need to remove the index.css right here okay save and let's go to app let's remove the css and logo and we need to get rid of this header right here i just want to let's say h1 say hello save so let's open the browser we should see h1 hello okay and let's uh create a folder i'm gonna say components and in here i'm gonna create a file called multi-step form i'm gonna say multi step form dot js and let's open a new terminal i'm gonna install the react hooks helper okay this thing right here so we can say npm install react hooks helper all right so it's done let's go to packets.json file now we have react hooks helper in here okay so let's go back to multi-step form we are going to create functional pass component in here so we can say rfc enter and let's change the let's add h1 in here i'm going to say multi-step form save and let's bring in the multi-step form in this app right here so we can say import from dots last components last multi-step form okay so let's grab the multi-step form and bringing in here now we should see a multi-step form in the browser here we go all right so we need to import use form and use tab from react hooks helper so we can say import from react hooks helper what we are going to import is use form and use step so inside the multi-step form function in here i'm gonna say cons form data and set form set it equals to use form and let's paste the default let's say default data and let's create the default data in here and say cons default data set equals to object in here and we're going to say first name empty string last name empty string nickname empty string so now we know that form data have this value right here this object right here let's use the use tab right here so i can say cons step and navigation set equals to use step and i'm going to put i'm going to put object inside in here and just give a name steps that's the all the step that we want to create so let's say cons steps set that equals to uh array and instead in here i have id let's say names let's copy and paste that couple time change this into address should be contact review and submit and let's bring in initial step in here set it to zero not the meaning about zero so let's try to console.log console.log the step which is this step right here okay so let's see what we have in console now we should see uh id names okay which is the first object inside this array if i change the initial step to one now there should be address all right so in here we need to create some condition say let's make back to zero and i'm gonna use switch in here let's say stab dot id because i want to access the id names right here okay this thing right here so if we have case the step dot id is names i want to return let's say names i'm going to create a folder inside the components let's say step form and inside this folder i'm going to create names js and let's generate functional path component e r ifc and let's change that into i want to capital first so names names and bringing h1 let's say names and let's import that into multi-step form let's do import names from dot slash tab forms last names save now we should see names okay that's because uh the initial step is zero okay if that's one of course the address in here will be a fire so let's make a case to address we need to return address okay let's make a case to contact we need to return contact if the case is a review we need to return review okay if the case is uh submit we need to return the submit company okay so let's try to create all this component inside a step form so let's say address.js let's create a contact.js let's create a review and the last is submit and just copy that and i'm going to paste in address and let's change that into address let's go to contact and change that into contact and review and the last thing is submit save now we should still see names but if i change the initial step to for example 1 now we should see address oh of course we don't yet import that let's copy that and change this into address wait and this thing right here into contact and this is for the review and the last thing is submit okay so now save we should see address now here we go if i change the initial step to for example three now we should see uh zero one two three review right so let's save and here we go we have review that's the step work basically let's make the initial state back to zero and i save now we should see uh names okay so let's go to names component in here and before that we need to install material ui so let's go to material ui documentation and we need to install that just wait just copy the just copy this thing right here and let's paste in here enter that and also we need to grab the phone right here let's go to public index let's put in in here and we need to grab the phone icons as well so let's put in here save and just close the index.html and we need to install the svg icons what happened in my mouse copy and wait for that it's done so let's paste and run the icons again all right so it's done let's import for the first time i want to import container let's say container from material ui slash course last container and we need to import the what else text field it should be from material ui's less course less text field alright so let's get rid of this div right here i want to wrap everything inside a container and let's give a history and to say names and i want to put the text field in here text field so let's try to save and we should see and just name an input in a browser here we go so now what i want to do is go back to multi-step form and we need to send the form data set form and the navigation into the each individual uh prop component in here okay we need to send that as a property so we need to create cons just give a name props so that it goes to form data set form and navigation okay we need to put that in here i'm using spread operator so i can say props like so let's copy this thing right here and paste that inside address inside uh contact inside review and the last thing is submit so now save and let's go back to names and let's grab the props i want to console.log the props okay save and now we should see everything that we have sent right here all right and as you can see in here in the form data we have all that value which is the of default data it's come from here okay so let's go back and i want to make styling in here let's give a label into first name give a name into first name and value set it equals to uh basically i want to restructuring the property in here uh what we send in here form data set form and navigation i believe notification okay of course we can access the first name by say form data dot first name all right so let's say form data dot first name or we can just say cons first name last name and nickname set that equals to uh form data okay so we can just use the variable and put that in here okay let's do the same thing by the way so let's try to save and see there you go we have uh this is basically a empty string by default as you can see in multi-step form we set it to empty string if i change that to chan now we should see chan right here okay so i just want to show that let's go back to the names let's give a margin to normal with margin to normal and farian into set that equals to outline and i'm going to say autocomplete into off and i want to say full width like so now save and [Music] let's see what we have okay so let's give a maximal width in container right here you can say maximal width i'm gonna set that into extra small save now it should be something like that okay awesome i want to make that smaller close that this is for the first name of course we need to grab the la the last name and nickname so let's just copy this text field right here make it two filled and this is should be last name last name value last name and everything is same this should be a nickname uh the name should be nick name value nickname and everything same now save we should see three input field okay also so let's add a button down here so we need to import that first let's say import button from from material ui slash course last button and we need to use down here you can say button and give a text next save and now we should have button down here okay so let's styling that a little bit uh farian i'm going to say content and give full width and let's change the color into primary save now you should we should have a beautiful button wait full width save bam and we need to add margin top i want to give a just inline style in here say margin top into [Music] say one ram save um yeah something like that i want to show you uh something cool so let's just console.log the for example first name okay we know that first name by default is empty string so we know that in here it should be added string okay so i want to handle the unchanged event in this uh first name so i can do in here let's see let's say on change set that equals to set form and that's it okay if i just do this now if i type in something in the first name right here now as you can see in the console the the first name right here is come from from data right here it's updated so we don't need to create another function to handle that because that's the beauty about this package all right so the important thing the important thing is you need to have the same name as a default data in here where is that right here all right if i change that it's not going to work if i change the for example a first name without chemical case just first name like so now it's not gonna work if i type in something i cannot typing anything in here okay just make sure you have the same uh name attribute with the name default data in here okay so now every time i click the next button right here i want to go to another form which is the uh address okay so what we need to do is just so very simple basically we need i just want to console.log the navigation and show that what we have in navigation see we have a go next pose play and previews what we are going to use is basically an x right here so in the button in here i just can say one click event one click set that equals to navigation dot next and we need to invoke that so now when i save and i click oh yeah we need to say uh arrow function in here save now let's click the next it should be go to the address okay pretty awesome let's refresh that okay so now i want to go to the address i think it's will be a very similar so we can just maybe copy this thing right here and paste that in here and also we need to the text field copy and let's change that into container first and give a maximal width into extra small and we need to head 3 it should be address and put the text field in here all right so it should be let's go to the multi-step form we need to add another uh data in here so let's say address set that to empty string city empty string zip i forget the state state and for the contact we need to pawn and email okay so let's just close the multi-step form let's go to address we need to grab the property so we can just copy this thing right here basically let's do the same thing so let's space in here the label it should be address name address value let's create cons address c state and z set it equals to a form data okay if i console this everything in here it should be empty string so now let's change the value into address everything is same now let's see next here we go but imagine that you have to uh click next every time you changing something so we need to go back to multi-step form and change the initial step into one the meaning what that is it should be go to the address right here here we go now every time i reload it should still go to the address okay that's what we want now so let's go back to address all right so let's grab the text field and i want to copy and paste uh three more time and let's change the level into what is city and the name let's say city value city and yeah everything is same let's go down here it should be state name state value state and everything same and this is for the zip i think the label into zip name zip and value zip and i want to change the type into number save now we should see a beautiful form in address okay awesome so the next thing is we need to create two button back and next button so let's do in here i want to bring in the button that we have already import from the material ui so the text it should be a back and this should be next now we should see to a button back and next let's styling that and i'm gonna give a color so that it close to a secondary and with secondary and for the faryan [Music] farian set that equals to uh continent and let's just copy everything in here and base down here and it should be yeah same but the color let's say primary save and here we go uh i like to give marching right in the back right here let's just give a style just just inland style and margin right set that close to i don't know one ram save something like that you know what i want to put inside a div like so and in diff right here i want to give a style and just give a margin top margin top into one ram and bringing the button inside the div like so save and yeah something like that now it's not it's not work but let's make that work if a back we need to unclick wait on click set that equals to navigation dot uh i forgot let's uh just console.log the navigation [Music] yeah we need to just comment on clicking here we need to use uh previews yeah previous it should be navigation dot previous we invoke the function and we need to say arrow function in here okay for the next we need to using next so let's do in here say on this space in here and this should be next okay save and now that should be work when i go back should be go to names when we next it should be go to contact okay pretty pretty simple so now let's go to contact but i just want to copy the listing right here and paste in here i want to copy this thing right here and base in here like so and yeah just bringing the container and add maximal width into extra small and hex 3 this should be a contact and text field i just want to copy that all right so let's bring in here and let's say cons we need to grab the pawn and email set that to forum data like so so now let's change the address into pawn name pond and the value of course same everything same so let's just copy this thing right here paste that down here let's change this into email it is mail name email value email and everything same okay now we should see a beautiful contact form okay but now we need to styling the button so let's go to address and we need to just copy this i think right here okay let's go to contact and let's paste in here like that so now next and when i click back it should be go back to the address next next preview awesome so let's go to the address i want to remove the console like so i want to close that and just close the names now we work in the review file so let's import couple thing from material ui i'm going to import container from add material uis last course last container and let's get rid of this div right here i'm gonna put the container in here and give a history and say a review and basically i'm gonna create another functional pass component on here i'm gonna say render accordion and set that equals to arrow function and just return to jjsx in here i forget the cons say cons and let's import accordion from material ui i'm going to import accordion from add material des uis last course last accordion and just copy and paste that i'm gonna import accordion summary it's come from accordion summary and just import accordion details it's come from accordion details like so so let's bring the accordion inside in here you can say corian and let's bring in the accordion summary put that in here wait in here and i'm going to call this a component inside this review right here so i can just see like that and i'm gonna send a summary as a property in here to say names so we can grab this summary inside this thing right here we can grab that so summary we know we know that this summary right here is half of value names okay so we need to showing in here so summary so now save let's see in the browser uh let's just change the initial step into zero one two three we need to say three save now we should see names all right so uh we need to give where is my container of course in here i'm gonna give a maximal weight into small here we go so let's add accordion detail down here we can say accordion detail and i'm gonna create a div in here and let's just send uh details i'm gonna send uh array inside this array i have object and just say first name set it into first name the first name in here is come from the property which is come from form data okay so that's destructoring down here we can say cons set that equals to form data and let's just copy the default data in here can just copy and paste that right here just remove the empty string ctrl d and save now the first name is come from this thing right here okay so let's just give a comma and paste to more time this should be last name and nickname and change that into last name and nick name all right so let's grab the details property let's give a comma and say details with details and let's just console.log to detail first so we can see console.log details and let's see in the browser nothing really details details oh here we go we have a object with three we have array with three object inside in here okay pretty cool so what we need is doing here just a map through this detail array so we can say details dot map we need to grab the data in the index and just console.log in here the idea is i want to grab the object a key right here the first name last name and nickname so how that we can do that so let's try to just console.log i'm gonna console.log object dot keys and i'm gonna put data inside in here and the first value so let's try to save and let's see what we have in the console see we have the first name last name and nickname which is the key in this object file object right here all right so that's what we want so let's put the object key inside a object key variable set that equals to this thing right here all right so let's create another variable to say object value set that equals to theta and we need to grab the value is depend on the key we have okay so paste in here all right so down here i want to return a list item tag this come from a material ui so let's do import this item tags it should be a from material uis less course less less item text should be a lowercase just copy that and we need to return down here so return list item tags and we need to bring in the object key and object value inside in here so i i want to use a backtick so let's do object key and we need to say object value okay so let's try to save and see what we have when i click the names right here we should have all that information in here the value now is empty all right the next thing is i want to add a edit button down here so let's import the icon button as you can see icon button from at material uis less course last icon [Music] icon fun and i want to import the edit icon so say edit icon from material uis less icons last added i believe okay so let's use the icon button we need to use in here like so and inside the icon button i want to put the edit icon like so and when i save let's see now we have the icon cool so let's styling that a little bit i'm going to change the color by the way so let's change the color into primary and say component into span okay save and now here we go awesome so let's uh call this render accordion two more time because we have a address and contact so let's do down here let's change the summary into address and object key right here into address the value address and this should be cd value city and a state value state and we need to the zip value zip and this thing right here should be contact and let's change the object key into pawn value point and this should be email value email so let's try to save and see in a browser now we should have names address and contact all right but we don't have to icon in here the x-pen icon so let's try to import that let's do import expand more icon from at material dash ui slash icons last expand more okay so let's just copy this thing right here and go to where is the accordion summary and we need to say icon no icon it should be expand icon and set it equals to the expand more icon okay so let's try to save and see in the browser now we have the icon all right so awesome cool so let's add a button in here i'm going to create button so let's import a button from material ui let's say import button from at material desk ui last course last button wait button and i'm going to put the button in here let's say button and give attack submit and let's styling that i'm going to change the color into primary and give a farian farian into container save and let's see we should have a button i'm going to post that more down so let's add in line style so that equals to give a margin top set that equals to 1.5 ram save and let's see here we go and the console we have warning so let's fix that the list item tags it should have a key and set that equals to index come from right here save now the warning it's gone okay so wait we have some wording again in here um you can fix this problem just go to index.js and you can remove to react with trick mode right here like so and now it should be fine okay no warning no error the next thing is i want to make this button work so if i click the i can edit icon right here it should be go to names form so how that we can do that let's close the index i want to go to review and let's grab the navigation navigation and let's destructuring the navigation i want to say cons i want to use go and set that equals to navigation all right so let's send the go method right here into the property go set that equals to go and let's just copy this thing right here and paste that in here and in here so we can use that wait so we can use that down here okay you can just grab the goal and we need to use in the icon button right here so let's add uh on click event in here say on click set that equals to i'm gonna give arrow function and just run the commented and when i click the icon button which is edit button i want to go to uh just say names all right so let's try to save and when i click the names and click to edit right here it should be a go to named form if i reload it should be good to review and i'm going to click in address now we own names okay we need to fix that so i'm going to use backtick in here and just grab to summary which is summary in here and remember remember the summary in here have a first is uppercase we need to change that to lowercase so we can just say dot to lowercase like that so now save and when i go to name should be on the names if i go to address it should be go to the address and the contact as well so next thing is when i click the submit i want to go to the submit page so let's do in here let's add one click on click set that equals to arrow function in here let's just say go and should be go to submit form save and just change the initial step back to zero and let's see so let's try to fill all this field right here i'm going to say chan first name last name death wait it's not working so let's see uh basically we need to forget that guys a listen for unchanged event in here and down here as well really like so now save and let's try to say achan and when i click next it should be good to address let's say my address my city state say my state state does not work oh what happened let's go to address where's the address oh really let's just copy and where is the address state okay okay cool okay beautiful tutorial let's say chand dev nickname i'm going to say chant next should we go to address say my address city my city state my state see one two three one two three and i click next should be good to contact and let's fill my real number and my real email uh and click next now we under review now as you can see in here we have all that information that we have already sent okay of course you can back to names if you click the edit right here or i'm gonna use i'm gonna uh try the contact and let's change the port number and it's updated okay if i click the submit issue should be go to the submit form so let's go to submit right here so let's import a container from at material des ui slash course less container and let's get rid of this div right here we need to put the container in here say container and let's give a history and just say thank you for submitting we will be in touch okay and just give a maximal width into uh small and give a style set that equals to just want to give a margin top to say for ram okay now save and let's see going to just random [Music] name i don't know just next and now we have all that information and when i click submit she we have thank you for submitting we will be in touch so i think that's it for this video i hope you learn something new from this video and thank you so much guys and i'm gonna see you in very next video i hope and bye

Channel: Cand Dev

Views: 24,056

Keywords:

Id: HuJDKp-9HHc

Length: 54min 45sec (3285 seconds)

Published: Tue Aug 11 2020