React Multi-Step Form Tutorial: Using Formik, Yup and material-ui

hello youtube today we are going to build a multi-step form using farm ik yup for validation and material UI for styling you can see that in the first step of our form we have a first name a last name and a checkbox and this checkbox asking if the user is a millionaire is really important because in the next step you can see that if I only say 200 pounds in my bank account it says because you said you are a millionaire you need to have at least 1 million pounds so let's say that I have two million pounds I can move to the next step and by the way if I didn't put at least 2 million pounds the next step doesn't happen alright we are stuck in this step while the validation is not correct so let me put back the two million pounds I moved to the next step and now I can just type something here like hello world when I submit you will see that all the buttons become disabled we have a spinner and the number 3 after our call to our server is finalized we'll have also a tick at this moment you can navigate to another page you can clear this form and start from fresh it's up to you you will also see that I will try to be as close as possible during this tutorial to the demo that already exists inside the formic repository so we will try to explain what's happening and keep as close as possible to that repository so without any further ado let's jump into this video if you want to follow along with me make sure that when you get clone the repository you are in this specific commit ok and if you are you will see this hello YouTube page now let's go to our vs code and earing vs code we can start by removing this hello YouTube so over here now we will have a for me component a form component and a field component this field component will have the first name of the person so the name will be first name and because we want to have material UI over here we can also pass a component that will be of type text field and the label will be first name okay so our first field is now created I imported everything we needed to import and you can see that now farming as usual is complaining that we need to pass some initial values and those initial values for us will be the first name is an empty a string then we have a second one that will be the last name of the person we will have one that is asking if the person is a millionaire or not which is a checkbox then after that millionaire we ask how much money the person has in all their bank accounts so it will start as zero and at the end we will have something called notes or description or details whatever you want to call to this one right it's just to have three pages to look nicer in terms of design right so let's say it's a description okay now that we have that one the last bit is an on submit function so let's also pass that one to form it so form it doesn't complain at us now the next step is for us to create the other fields the other four fields that we are missing so I will just do really fast this copy-paste and now I can see that this one will not be a text field it will be a check box with libel all right and it will come from there and vs code already imported that which is good and the label will be I am a millionaire in this label at the moment will not work and you may be asking oh but why well because these library I'm using the formic material UI formic material UI as a specific scenario for that for that specific component for the check box with label so if we go to their website and their API you can see that the check box with label will have these format so we can copy that one go back to our vs code and pass that format so we don't forget about it and we will have a liable to our checkbox which is important for us right we can even say type equals to checkbox the this one will be a type of number because it's our Monday so we can go over here inside money money over here we can say manly and I will even copy-paste these values otherwise I will make a mistake and I don't want us to ruin the demo because of a typo right so over here we can call this one description this one instead of money probably all the money I have which is probably a better description for making sure you are a millionaire or not because in reality you can be a millionaire and they have no money whatsoever you can every have everything in shares or in houses or cars and you are still a millionaire but you just don't have the piper in your end right but for the demo let's say that in order for you to be a millionaire you need to have 1 million pounds or 1 million dollars or 1 million euros in your bank account alright so now that we have that we can go to our browser and just make sure that our form is there so everything seems to be there this is a number so I can type whatever I want this is a check box this is a description last name oh and I noticed something the first name the last name they are having some autocompletes so let's first remove those ones and immediately after we will start to do the validation when you click in I am a millionaire all the money I have needs to be at least 1 million pounds or dollars right so let's go over here and the first thing we need to do when we want to remove that autocomplete is over here to say autocomplete to off and when these autocomplete is to off we will even know how to complete again now as I said let's do the validation and to do validation validation schema because we are going to use you and we will use the object from you and the only field we want to validate over here is the money field and the money field will be dependent on the millionaire field so filmic already provides something for us we can just import this from Europe and now we can say for the money field it will be of type mixed and we need to import this one also from youth and we can already import the number because we will need the number in a second and we can say the mixed when the field Millionaire is true so someone clicked on the check box and now that check box is true then we will say that this is a number is required and is at least 1 million pounds all right by the way this is valid notation for numbers I just discovered this a few months ago and it's nicer when you have something big it's quite nice right so we have required and minimum is 1 million pounds so instead of having like these you can have oops my computer is crashing you can have like this now we can have also the otherwise so if it's false in this case it's still a number it needs to be required and because not everybody in the world has the luxury to have their bank account with positive money I will leave no minimum value to zero because your bank account can in reality being negative right so let's keep it as is we can now save this one and if we go to our browser we can check two things with it so no autocompletes over here and right now if I have something that's not at least 1 million pounds we have this message saying money must be greater or equal than 1 million pounds we can even make a better message because honestly I don't like that message so we can say because you said you are a millionaire you need to have 1 million pounds or 1 million only and people now buy their currency right so let's put a comma over here not a dot and when we come back to our browser we refresh this one and after all the errors are gone we should now be able to see that that message is there because you said you are a millionaire you need to have at least 1 million pounds and now I destroyed something why have I done do-do-do-do-do everything seems to be fine let's go back here ok it was still compiling as I said my computer is quite slow today so when I click over there and I say just I have 1 pound because you said you are a millionaire you need to have 1 million so this is working now it's the time when we start to do our multi steps and so if we want to do our multi steps we need to come over here and just to start the first thing I'm going to do is to say the first three are in the first step this one will be in the second step and the third one will be in a third step so let's start by doing just a simple Steve over here just to have a visual difference between the steps ok so let me just do these now oops now come over here and do these and come over here and do this so now I can just do copy-paste over there copy paste and this copy paste over here alright and now at least we have a completely clear difference of what we want to be the first step the second step and the third step right so our first thing we need to do is to create what I will call a for mix pepper so let me show you what I mean by that let me go over here inside export function farming stepper and this for mix stepper will have exactly the same inputs as farming so we can even check what farming has at the moment and I something like a values yeah it's a farming config and farming values so we can copy that one inside our props will be off type for me config and farming values so we can go up top inside in the farm ik to import for me coffee and farming values right so now we have a component that will receive exactly the same inputs as farming we can go at the bottom and we can say the following we will receive everything we will have a children a props and now that we have this we can just copy paste roughly what we did over here for this farm ik and the farm so let's come from here to the top copy this one right and just do the following control V and now I don't want any validation yet I don't want any initial values or any on submit I just want to pass oops I just want to pass all the props that we are already passing right so if we do that we can come over here close this farm Mick and now just do a return over here and here we will have the children so this is the first step in order for us to control what for mix that is doing we can go over here copy this and just rename this one instead of farming to farming stepper at the moment nothing should change everything should be the same we are just creating our own a wrapper on top of farming and you will see that these oops these needs to be power for Mick stepper and you will see that these will be useful in a second let me just go to the browser to make absolutely sure that everything is as we expect and as you see my computer is really really really slow today so we have this first step and let me just make sure that when I click here and I click there I go away we still have the validation working so everything is still working as it was two minutes ago now what's the first step the first step we need to do is to come over here and check the children's that we are receiving and pass them to an array so we will have them as an array so let's say that we have a children array which will be react but children to array and we will pass our children so now we make sure that we have an array of children which is fantastic for now let me just import react from react because we are in an XJS application so up to this moment I didn't have that important if you are in a create react app you already have bad one imported so I can go to the bottom once again and I can say ok I have my children oh right and if I have my children right over here instead of showing all my children I can just show the children from that specific step so let me create a new state that will be a step we will have a set step equals to use state and these you state we will start at zero right because the first page or the first step is the step zero we can import this one and immediately after we do that we can say constant current child equals two children array of children array of step so at this moment our current child is what we want to show right and when we go to the browser in a second we will see that we are only showing the first three fields the fourth field in the fifth field we are not showing arrow so let me just format this code to make sure that it looks nice for our highs to be able to read what we are doing going back to our browser and refreshing we should only see now the first three steps and actually I'm doing something wrong what I did current child child array and I'm saying the step of zero and I know what I'm did what I did what I did and this is a mistake that you will probably do as well I have a farm and the immediate child of my farming stepper is my farm so what I'm literally doing over here is saying okay the first child show the first child I only have one child so it will show this farm but because we already have this form inside the formics Tepper and i will show you once again I already have this form over here in the farming stepper it's safe to remove it from there and now if you see the immediate child of our farming stepper it will be these divs so now yes now when I go to my browser I will see only the first three checkboxes checkbox are the first three fields not the first three checkboxes and now that we have that we can start to create a button to go back and forward to our form so let me go over here and at this moment I will create two buttons okay and the first button I will create will be a back button so I will say bahattin and this button is coming from material UI as well and we can say back button and every time that this back button is clicked we can say set aside on click on click equals to set step of the current step -1 alright and these will have problems on its own if we don't do any validation before because we need to check if the step is already zero we shouldn't show this button so let's just do that validation immediately to not forget so if step equals equals or better yet if the step is bigger than zero right we show this otherwise we don't show anything so our back button should now be correctly working and should be perfect by this point now the second thing we need to do is a forward button or a next button so let's copy this one because it's just easier to copy and as you know I'm a bit lazy and now we can have something over here we can instead of having an unclick we will take advantage of formic on itself and say that this is the submit alright and if we take advantage of them formic before calls our on submit here on this form on submitter all right before it calls this on submit on this form for mcwilley that the form is valid so we kind of do two actions in one go we make sure it's valid before we navigate which is great and at the same time if we are already on the last step it's a submit as well so this is great for us right so what can we do we can over here say that this is an asynchronous function we will receive values and helpers right and now what we need to do we can check if form not form sorry if the step is equals equals equals to the children array dot length minus one which means we are on the last step of our form right if we are on the last step of our form we can just do the following a weight of props dot on submit and to these ones we will pass the values and we will pass the uppers right and this is calling our parent when we are on the last step but imagine that we are on the first step we just want to move forward so we can say hey all so we will just move forward so we can say set step current step plus one right and so if we are on the last step we don't even call this one because this one will be called so we don't even need to do many more validations the only thing we need to do right now is instead of this being a next when we are on the last page right we will probably call it a submit or a Save button or anything that makes sense in the context of Europe and knowing that I will repeat this logic quite a lot I can create a function that I will call is last last step and in this is last step we can say just this so our code over here will be even nice to read it's much easier to read now if it's the last step then call your parent on submit otherwise just move one step forward it's easier to read this way and over here we can do exactly the same thing we can go over here inside is last step and if it is we will say submit in your application probably you can say save or something that makes sense in your application right so we can now save this one we can format all this code and our stepper is almost done you will see that we have a major bug in that stepper right let me go to the browser and when i refresh this one you will see that I will not be able to advance so if I do I'm a millionaire and I click Next I will not be able to advance and do you know why is it happening well we have the next page or the next step with the field that depends on this one so that field that's not on the screen at the moment is filing our form is not valid because our form is not valid form ik is not calling our own submit function because our on submit function is not being called we can't move forward if we make this one false you will see that we will be able to move forward because now this field over here is no longer invalid so how can we handle this well the solution is quite easy we can replace our farm it gives these divs that we have over here right and we can create a field now the field sorry not a field a component now that we can call for example for mix step which will be just a step in forming let's go over here and we will do something really similar to what we did for this one right so let me copy this one and these two calling these a stepper I will call it just a step right and what I care over here is all the steps that I do right I will care about only one thing which is the validation schema if in your application you care about more things you can pick more things so I will use of a typescript helper for this so I will call it interface formic step props extends this one okay and now when I'm extending this one I can say that I need two things I can say pick and when I use pick typescript will as the name implies pick only the properties I will pass over here as a string in my case I just care about the children and I care about the validation schema okay validation schema so now my for mix steps all right we'll have only the children and the validation schema if you try to pass something else like an on submit or something like that this component will not accept because it only accept these forming steps so now it's safe for us to go over here and replace everything by farming step oops not step drops step all right let me copy this one and replace everything that was a div before by these farming steps I can now go super safely to our validation schema and instead of having the validation schema in the top level of the farm I will remove from the top level of the form and put it only in the step that matters for me and the step that matters for me is the second one because that's where that field is but doing these on itself well nothing especially happened right we need ops we need also to return over here return the children right and just for react to work correctly we can put it inside the fragment right so now that we have all our chips this is the interface not the component 100% my bad I'm sorry so we can do this right and now we will receive these properties but we are not going to do anything specifically with those properties and in reality is no longer properties we just receive the validation schema but we don't need to care about it because if someone wants they will pass it in the formics steps like we are doing over there right now this guy is now complaining and it's saying that is missing the following properties from the type for me config on submit but we already did the farming steps so we just need to come to our component and now say that we receive just the properties we created over here which are the children and the validation schema so when V s code does the validation again that one shouldn't be in problem anymore okay and now that we have that we can even come over here inside as react dot element type and the element type of these will be affirming step props all right so we know that we have an array of forming step probes knowing this will give us one really amazing opportunity and I will show you what I mean by that let me just do a console log and go to the browser because probably I type it already too much without without showing you in the browser so let me do this and now this one is complaining about a lot of things it doesn't really matter for now let me just remove this one and we will take care of it in a second so we have depth we are printing this so you will be able to go to the browser and see what's happening so if I do f12 let me open these over here right and I do next you can see that I received a children which is of this type but the most important thing that we need to care now is we have a props over here and I have a child and I have a validation schema and this validation schema is literally what I care about at this stage so we can go over here to the little dude okay we can go over here inside at the current child it will be as react dot element type oops element type of farm ik step crops all right and saying this now I can go safely inside these current props and do dot props dot validation schema and this is exactly what we care about for our farm ik so let's go over here inside validation schema right will be our current child dot props dot validation schema because in each step we just want to validate that specific step we don't want to validate any other step right so for for me for Mick so this is a farm ik step step props right let me just copy this one to make sure that we have the exact same name and yes we have the exact same line so this one shouldn't complain anymore and with this over here we are now safe to just go to our browser and you will see that our validation is now working as we were expecting from the beginning so let me refresh these and these after refreshing we can say Bruno my last name we can say yes I'm a millionaire I can say next and if I try to do next oops sorry you can't because you said you are a millionaire you need to have at least 1 million pounds so let's say that I have 20 million pounds I can click Next I'm in the description which is the last step of our form and I can say hello world I can submit and the submission happened right so now it's time for us to start to make these look a bit nicer we already solved the main issue of this video so if you don't want to see me making this forum a bit nicer you already know how to do steps and you can probably disconnect from this video and I hope to see you next week if you care about the farm ik look and field I will now keep going and making this farm look a lot nicer ok so the first step for us to make this forum look slightly nicer is to go over here at the top and we can make all the fields we have inside for example a box so let's go inside a box and let's wrap everything into a box and when I do that and wrap everything into a box I'm literally going to ask these box to have a padding bottom off I don't know two three three probably right padding bottom of two is sixteen pixels of trees 24 pixels okay let's start by a padding bottom of to ollie so padding bottom of two and if these works correctly we can do exactly the same for the other two steps in our form so let me just format and I'm confident enough I will do this I'm I'm really confident that it will work correctly so let's just do this let's put this box over here and copy these one and putting this one over here right oops not a control X I control C and ending the farming step so now it should look quite nice our form or at least much nicer than before let me go over here and if i refresh I go back to the first ever step in our form right and now our fields at least are in sequence I just need to say that all the fields should be a full width so let's say that all the scurry all the fields now we'll be full wait let's go to this one oops this one as well and this one is full wait now I go to this one and I will say it's also full with this one will also be full with and this one is also full bit so every single field is now full screen alright now the next thing that I want to make to make this look a bit nicer is to come to our buttons at the bottom inside color equals to primary and I think the variant is contained variant week's content I think this is it let me copy this one and also add it to this button I can save this and now let's go to the browser to see if after all these changes if yeah this is looking nice so I have that one and I can say Bruno my last name I can go to the second step we can put some spicing over there but for now it's good I can say 1 2 3 4 I move forward I can say the description as hello world and I can submit so this is working nicely right let me just check what I did it doesn't recognize a full width ok we are saying in the check box full width and the check box it doesn't have a full width which is expected so let's remove this from the check box of that error is gone all right so let's just for Matt this one last time and the last bit I want to do and I really want to do these last bit is I want at the top to have one two three in terms of steps so we can go to the material ey component and over here they have something that they call it a step or a stepper so get started go to components and I think is a stepper oops I think it's a step for yes it is a stepper and now in this pepper we can do something quite nice we can go to this one and just copy what they are doing right oops I didn't want to open it I just wanted to click over here and now I can go to the bottom of this one and let's see today dududu where do they have that part of the example I think it's this bit so let's copy this bit over here and we can go to the top of our farm ik over here inside we and we want a stepper and the stepper in reality we'll go to all our child's right so we can go over here and get the children array and in the children right first let me import this let me say that the map will be on our children array and I'm I can see that now they receive also a step which is our step and we need the step and a step level and so they also have a label so we can go to our farming step and create a label so we will be able when we do the props dot validation schema we also have a props dot label so let me go over here into our interface inside we have a label which will be of type string now all our forming steps will start to fail but even before they file we can say more info for example for the last step we will call it more info for this step we can call it bank accounts for example and this is personal data right so this is this personal personal data I think are good names right so when we do that we can go again to the bottom of our page and now that we have this over here we have this label we have the steps let me just make sure that we are importing everything from step step label okay look like we are so we can go to our component over here refresh and now we have that thing over there at the top so we are doing a huge mistake right now right let me go to the bottom and instead of passing everything we don't want everything we want to grab that child and inside the child we will the child got props dot label and so we can compete this one and put it over there otherwise what we were doing was we were showing all the the child the child as they were so with the fields and the farm and everything and that's not what we want right so we can now go and now it's starting to look much nicer let me just refresh clear these refresh and when we refresh I don't even know why I have this still open when we refresh you have personal data bank accounts and more info the fields start to look super nice so I can say Bruno my last name I wish I was a millionaire I click next and I need to say full wait for this one I removed it probably so now it's okay I can click next and in the description I say yeah I wish I was rich so now we could submit and do whatever we wanted so let me just go over here and do one one nice thing for our for our field before let me just put the food weight to the second field so this one will be full width and we never remove the full weight from this oops I did a mistake I remove the full weight from here instead of removing the full weight from the check box okay so now on top of that we shouldn't have any errors in our cause oh so refreshing all the errors should be gone hopefully right and yes all the errors are gone now so I can close the console and now I can say Bruno and to Inge I'm a millionaire I can say a lot of money submit and when it submits now we just need to create the on submit function and I want to make some kind of spinner in this button while it's submitting and disable the buttons that's the last bit we need to do today so let me go over here at the bottom right to review at the bottom and now we can over here say that in the farm ik we can grab the context and now if we are submitting or not so we can do is me thing I think it's like that and now I can just grab this to the bottom of this component immediately before farm so we know if we are submitting and if we are submitting we just need to say disabled equals 2 is submitting and disabled oops disabled equals 2 instead meeting right on top of that when something is submitting you can even change the the field or at least you can change the text of the last field so you can say is submitting if it is submitting you can say sub meeting right otherwise we will say submit or next let's go to our browser refresh and we can put some spacing out so between back and submit we will do that in a second so let's just say I'm a millionaire put something here that really doesn't matter move forward we do that and now we have submit and we just need to have some sleeping State over here so let's create cost sleep equals to a function Oren yeah it can be a function that we say time and this function will return a new promise with accepted and we was a third time out of accepted and we will pass the time right so we can say over here in our on submit we can say something nice we can say that it will be an asynchronous function and so we will do a weight sleep of three seconds and we can say values and so we will do console dot log values and values all right so in imagining that these three seconds is we doing a call to an HTTP when HTTP calls to a server so we will be waiting three seconds right now now that that one is done we just need to go to the bottom make sure that I still have design submitting yes I have the submitting over there so refreshing this we can now fill the form again if we are in a real application probably we can create a script to allow us to move forward a bit faster right so doing this and now it's submitting the buttons are disabled while we are submitting and then we finished that one right so let me just put some space over here and I think we are done when I do that right I think we are I don't think I'm not remembering about anything that I want to do more so let me do the grid and on the grid I can say that this is a container we can cite a spacing of two and now inside these I will F a grid which is an item so we close this grid and I will have another grid over here grid which is also of type item and I just need to close this grid so now those two buttons right they are completely aligned we are in a right place it will be nice if after those three seconds right we could say that the last step also has a tick because at the moment if you saw our last step I didn't import grease our last step I can import from here our last step at the moment is not putting a tick when we go to the last step it puts the tick on the - first but not in the last one we can achieve that if we want to and so let me just do this bit over here inside constant completed set completed equals to use state of false so by default we are not completed right and so when we finish in the last step we can say the following we can go over here inside set completed to be true you can even do something else which is helpers dot reset form so you clear immediately the form and we can even say set step to be 0 for example right so we go immediately but let's not do that let's leave the pharmacy's and just show the set completed with the tick right so now when we go to the last step right we should see the tick let's try that out refresh just to make sure that we are really in the first page we will put the f12 to make sure we don't have any errors so I will say Bruno and to orange I am a millionaire yes I am let's put a lot of money over there click now in the description hello world I can clear this disease one of my extensions and now when I click Submit I'm submitting and I should have all the values over here which is great let me just do the spin and I talked about before so we can have I think is a spinner or a loading circular loading I think it's something like that progress and inside progress I think we have this circular loading circular progress not circular loading ok so we can come over here to our buttons and we just need to do one thing our buttons in material they have something called start I can and so if is submit think we will say circular progress if not we say no we can even say the size of this will be one REM so it will be the same size of our text right we can save this and if this works this is the last thing we need to do for today let me just refresh the page and refreshing the page it should now go to the first step right we are in the first step so let me repeat everything again this is becoming a bit boring Oh circular progress is not defined because I didn't import it yeah good job Runa good job good job so we import now the circular progress right and after we import the circular progress we can now refresh our page it will probably take a few seconds for it to load and now that we are here we can say Bruno and turn yes I'm a millionaire next one two three four next description allow world submitting with a spinner and when it finishes we just need to put the completed over here we are setting the completed but we are not setting it into the step so the last thing and this is actually the last thing completed completed equals to is last step right do we want to do this because if we do the completed over here it will say that if we are the last step or we are completed so actually what we want is if we are not in the current step or if the current step let me do this index so the index will start at 0 so when we are in the current step is 0 it's not completed but when the current index is number 1 and this value is the 0 then it's completed so we can say current or step step is bigger than the index or completed completed right now yes if our current step is above this step right or we are completed now we will show completed also well it's already showing but I will refresh the form and do it one last time spend ourselves another 10 or 15 seconds filling this form so I'm 2 inch yes I'm a millionaire next this is all the money I have description hello world so we have the first two checked so after the 3 seconds you can look into this number 3 and this number 3 should be checked so it is checked I think we did everything we propose to do for this video I really hope to see you over here next week if this video was helpful please like the video subscribe to the channel and I see you soon enough bye bye

Channel: Bruno Antunes

Views: 53,403

Keywords: multi-step form, multi step form, multi step forms react, multi step form react.js, multi-step form react.js, multi-step form reactjs, multi step form react js, react multi step form, react multi-step form, formik multi-step forms, formik wizard, formik, material-ui forms, javascript multi-step forms, formik multi-step tutorial, react js forms, react forms, field that depends on other field validation, multi-step forms react, multi step form formik, react wizard

Id: l3NEC4McW3g

Length: 47min 52sec (2872 seconds)

Published: Mon Jun 08 2020