React Multi Step Form With Formik + Yup - React Tutorial

hey guys in today's video i want to show you how to create a multi-step form in react using formic so to get started let's head over to code sandbox io and create a new sandbox and we want to click on the react sandbox okay so what we want to do is create a couple of forms that are eventually all going to merge to collect the data at one point and then make something like an api request so what i want the data to look like is something like this so i want to have four fields so i want to have first name i want last name so this these two fields i'm going to capture in one form so in one of the steps and then i also want email and password so email and password i'm going to capture in the second step of the form and then once we submit the second step i want to actually make the api request so the way that i'm going to handle this is i'm going to have a wrapper component um so in this case i'm just gonna use app but obviously um if you actually create a project but we want to create a component like multi-step multi-step form or something like that um but in this case i'm just gonna use app and app is going to control all of the logic that involves changing steps and collecting the data then what i'm going to have is components for each step of the form and of course you can have as many steps as you want so the purpose of a multi-step form is that often we have very large forms in um in our project and we that's not very user friendly so one of the things one of the ways to tackle that is to actually break it down into smaller steps so what i'm going to do is create some state here so i'm going to call it data i'm going to say use state and the default value is actually going to be this right here so it's going to be all of the fields that i want with their empty values so of course if these are all strings if you wanted something else and like a integer then put the zero value for the integer or something like that then what i'm also going to do is create some state which is going to keep track of what um what step i want so i'm going to call it current step and set current step i'm going to default this to zero the reason for that is we're actually going to use an array to decide which step of the form run and erase index zero so let's just create one step for now so i'm going to call create a new component called step one now i don't recommend doing this all within the same file here so i'm doing this all in app.js but that's just so it's easier for you to see so i'm not constantly swapping between the files of course for you i would recommend that each step is in its own file so that way it's easier to maintain and manage so we're going to be using formic so let's add formic and i'm also going to add in the up for the validation but we'll look at validation later on so let's import a couple of things so let's import formic from formic now i also want the form and field [Music] components from formic as well so i do have a separate video that goes through the basics of formic so i'm not going to go through formic itself in this video i'm just going to show you how to integrate it into a multi-step form but i'll leave a link in the description to that video so you can learn the basics formic so step one is going to be a formic component and of course we have to actually we have to return the function from this the render function and i'm going to call form here so we don't have to handle the on submit once again this is in my other video and then i'm going to use field now of course i don't actually recommend using field i recommend you create your own custom field component that then hooks into formic but just for the sake of simplicity i'm going to be using um field for this video and field just creates a input field with the name that we give us i'm going to call this first name and it handles the things like the unchanged and everything like that so we don't have to handle it so first name and last name and i'm also going to add in some paragraph tags as labels so first name and then also the last name and i'm also going to add in a button i'm gonna call this next so this is from step one so it's gonna go to the next step i'm gonna give this a type of submit since once this is triggered i want to trigger the uh on submit on the formic component but we'll look into that in a little bit so now we have this simple form i'm just going to repeat it for step two now you can have as many steps as you want and i'll show you guys how to add in more steps uh later on so let's so this is gonna capture the email and the password okay so we've changed the names for that for those fields as well i'm also going to change this from next to submit since this is going to be our last step and i'm also going to add in a back button which is actually going to be of type button and i'll show you guys why we're doing it like this later on so now we have these two simple empty forms um what i'm going to do is actually show you how we're going to render these uh forms so i'm going to create a constant called steps which is going to be an array and this is going to contain every step within our project within our multi-step form so i'm going to say the first step is step one so the step one component and the second step is the step two component okay so now that we have these two let's actually render this so the way that i'm going to handle it is i'm going to say steps um but this is just an array so we want to actually show so you can see it's showing everything but i actually just want to show only step uh only the current step that we're on so since it's zero by default it's gonna select this i wanna select um this step one so i'm gonna use current step here and now you can see it's only showing the first step now i want to pass down some some props to the step so that they can actually interact and when we click next they can actually go to the next step so i'm going to create a function called handle next step and what i want this function to do is provide me with the new data so the data that was captured in that step for example for a step one i want it and then the user input some data i want to capture that data and put it into new data and then of course i also want to um so let's do that so it's set data this is going to be an object i'm going to spread in the previous state and then i'm also going to spread in the new data and then the other thing we want to do is increment the current step so set current step we're going to grab the previous current step and just add one to that okay so that's how that's our handle next step function now another function i want to create is handle previous step so when we want to go back one so we're still going to expect new data and the reason i still want new data is let's say where we've completed step one and then we're on step two and we fill out some of the data but then we decide to go back i still want to hold on to that data that they filled in even if it's incomplete so that eventually when they do return to step two some of the data they they already inputted is still there and they can just continue from where they left off the only thing i'm going to change about this is instead of incrementing previous incrementing the current step i'm going to decrement it i guess now that we have these two functions let's actually pass these down to the steps so the way i'm going to do that is as props so i'm going to say next is going to be handle next step i'm also going to pass down data and the reason i'm passing down data is let's say they go to step two and then they return back i want the forms to be pre-filled with the data that was previously inputted and since we're collecting all of that data here at all times um then formic will just put that into the fields and i'll show you guys that in just a moment i'm not going to provide the step one with brief since i there's no previous step um so let's do this and i am going to provide this one with prev which is going to be handle previous step okay so now that we have passed down some of the props let's actually look at adding in some logic so for step one i'm going to provide the initial values and we should also grab props i'm going to provide the initial values as props dot data so once again this is props so this is this data prop that we're passing down which is our um all of our data will collect it into one place so we're passing that down and we'll look into validation later on and the other thing i want to handle is the hand or submit the on submit so i'm going to create a function called handle submit and we get the values and some helpers from formic now i'm not actually going to be using helpers so i'm just going to remove that and only keep the values so i'm going to do is i'm going to call props dot next so i remember this is this function right here so this next prop and what we're going to do is pass down the values so when we call this so when the handle submit is so when this next button is clicked it's going to trigger the on submit we're just going to call handle submit we're going to get the values that the user inputted and we're going to pass that to next so when we pass it to next it's going to go to this handle next step function that new data is going to be these values since that new data is that values we're going to set that to our the data that we have where we collect all the data and we're also going to increment the current step so that what should render next so that this will go from zero to one and then we should render step two so if we now test that out if we say john doe for our first name and last name then when we click next you can see he went to the next um next page so let's also add in a console log for our data so now if we clear this let's refresh the browser we say john doe we hit next and you can see in data now we have uh first name john last name do and email and password is still empty okay so now we have that working and if we actually test it for this as well we haven't actually filled out step two so let's work on adding in the logic for step two so it's going to be very similar i'm going to copy the handle submit i'm going to grab props and say the initial values is once again props.data and the on submit is still hand or submit so very basically the same as step one now we'll look into the backbone and before we do that let's actually just test that is working so we do so here just we haven't got any validation so it's just free moving on to the next step but if i put test here and test here um you can see that we also need to protect it from going to the final to a step that doesn't exist so we'll look into that as well but before we do that we can see here we have um email and password here as well so that's nice so all the fields are indeed being captured now i'm gonna add in one more um flag to handle next step which is going to be the um whether it's the final step so i'm just going to say final and default that to false and then here i'm going to say if final then what i actually want to do is make my api request so make request i'm just going to for now console.log form submitted and say let's say form data so this is um in place for an actual api request so i'm going to call that function make request i'm going to provide new data so new data here will actually be all of the data and then one more thing we do is just return and the reason i'm returning here is because if this is the final step i don't want to increment the current step by one um since we shouldn't have any other steps remaining so then what i'm going to do is in step two i'm going to add in true here so the reason i'm adding in true is because this is going to be the value final um i don't have to do this for next because i've set a default of false so that should normally just always ignore this and let's just increment it by one so now if we refresh our browser if we test this out and we hit submit you can see it's not going to the next step and if i add in some data you can see here form submitted so this make request function was actually called so you would if you are making a real api request you would have all the data here in form data okay so now let's look into adding in the back button so the reason i label this as type button is because normally on submit it's going to it's not going to call this on submit function unless the form is valid and if you have any kind of validation then um and the form is only partially filled in and you would uh call this on bank then you would run into the issue of forcing the user to actually fill out that form so that this on submit is actually called so instead what i'm going to do is call um zadne on click and this on click is going to be a anonymous function we're just going to go props dot um i think i call it brief let me just check yeah so this previous function here and once again we need to add in new data so previously we're getting new data from here these values that formic provides us we also get those values from the render function here so here i'm destructuring them but of course you could also do something like formic props form props and do something like um so prev and then form prop start value values but i'm just going to instead destructure it as values so i don't need to call that i can just pass values so when this button is clicked the value so the current values for email and password will be passed up to here to this function here handle previous step we're just going to take those values once again put it into data which is where we're collecting all of our data and it's also going to decrement the current step so if we test that out now and i click back you can see it goes back to the previous step you can also see that the previous values we had john doe are still here and the reason that those are still here is because in step uh in step one you can see we have set initial values to prop star data and we're passing down data so that's the reason why we're able to keep the values through each step okay so now as a final step i'm just going to do is add in some validation so i'm going to import everything as yup from yup i'm going to create a new schema so i'm going to call it step one validation schema this is going to be a yup.object and we just want to write some validation for first name so there's gonna be a string it's going to be required as well and then i'm gonna do the same thing for last name uh one more thing i'm going to add into the steps um so first is actually provide that violation scheme as a validation schema is equal to step one violation schema um but actually show the error messages you can access them from the formic props here i think it's formic props formic props dot errors and then you can check if that field exists but i'm just going to use this helper component the format provides called error [Music] of error message so you just import that from formic and the way that this works you just provide the name so this can be first name and it's going to check for you if first name has an error then it's just going to render it on the screen so i'm going to do the same thing for everything so first name last name and i'm going to do the same for form two email and all you do is just provide the name and i'm gonna do the same thing for uh password now of course once again i recommend you actually create your own custom format component uh your own custom input component that are center formic which i cover in um the previous in another video so now if i actually try this out we can remove this if i go back to here and i clear these fields you can see that it says first name is a required field you might also notice that the way that first name is written it's got this underscore that's because first name here has an underscore if you want it to look a little bit more user-friendly you can just add in dot label and then you can use that so if i do it like this last name and then i hit next you can see now that labels are a bit more user-friendly so let's copy that and do the same thing for step two and we want email and password i'm just going to call this password and [Music] email and on email i'm just going to add in the validation it should be an email then we have to remember to add this in to the validation schema so then if we actually fill this out and then we hit submit here you can see this one will return an error and if i have this as i think and hit submit you can see password is a required field so if we wanted to add in more steps all we'd have to do is just create another component like this we would pass down the next the previous and the data it would be very similar to step step 2 where it would have the submit button and the back button the only step that wouldn't have the back button that shouldn't have the backbone really is the first step since there's no previous one and then everything else is basically the same you have your validation schema for it you always provide in the data and you always add in the handle submit and another difference is that the handle submit should only have a second parameter of true for the final step apart from that everything else is the same now before i finish off the video i do just want to explain how you could handle tackling error messages from the api so sometimes when you make the api request you might get some sort of error message um this could be a generic one like self error or it could be more specific to an individual field like emails already taken so the way that you one way that you can handle that and there are quite a few is you could just create some state errors uh set errors and you could hold the arizona object here and you can just provide these errors to all your steps and then within the step you can check if let's say first and error dot fast name is uh exists then you can just show that error message and also if you know the first names on the first page you can set the current step manually to the zero index or the first page so that's one way of handling it um you could also handle it in a slightly more complex way which is um using format graphs but that's something uh it's a bit more complex and i don't think it's completely necessary but yeah so that's it for this video guys i hope you enjoyed i hope it's clear now how to make multi-step forms in react using formic if you have any questions let me know in the comments below if you liked the video i'd appreciate a like and i do have a video covering for make by itself so i recommend you check out that video if you're not too familiar with formic and i also recommend you if you're into if you're looking to learn more about react and check out my channel i have quite a few react videos um yeah thanks for watching bye

Channel: LetsCode

Views: 19,267

Keywords: react, react.js, formik, yup, yup validation, tutorial, react tutorial, react-js, javascript, javascript tutorial, hooks, react hooks

Id: xAjbUJfpoz0

Length: 21min 43sec (1303 seconds)

Published: Mon May 10 2021