Multi-Step form with react-hook-form

all right i hope you guys are ready because in this tutorial we're gonna take this one big form and break it down into a multi-step form and we're gonna use one of my favorite tools for this it's called react hook form and after this tutorial you're gonna be mastered on using it so let's get ready and let's get right into it to code along with me clone this repository from github the link is in the description so at first let's start by breaking down this form into three different parts we want the personal billing and legal information to be on three different steps on the form and to keep track on in which step of the form we are we are going to use u state in react so let's start by creating some variables here we're gonna have form step and set form step and it's gonna be from react use state and the default is gonna be zero okay so let's divide each of the sections into sections so for the personal information let's wrap it inside this section tags like this and then wrap this inside curly braces and then we can say if form step equals zero then show this one and nothing should change but if we change the default state to one it's going to disappear from here [Music] and if it's changed to zero it's gonna come back and now we can copy and paste this for the other sections too [Music] so i'm just gonna copy and paste and of course for the billing information we want the form step to equal one and for the legal information we want the form step to be two so let's save it and let's play around to see if it's working so with one we should see the billing information and two should be legal okay it's working great so far so now what we have to do is every time the user type something here and the form is valid and they click on this button it goes to the next step so let's write a function that completes the step and we can just call it complete form step [Music] and we're just gonna increase the form step by one [Music] like this and let's add it to the button so on the click complete form step and we're gonna change this type from submit to button and let's rename it from create account to next step let's save it and see if it works some click on it this and it goes to the next one next and the final step of course right now we're in the step 3 which doesn't exist so we can actually create one maybe we can have a section that says something like congratulations you created your account successfully so let's do it right now i'm just gonna copy and paste this and just change some of the information there [Music] so when form step equals three we want header saying congratulations [Music] let's save it and we should see it here all right perfect and of course we don't want to show the button here so we need to kind of conditionally render the button that if the step is less than three when we want to show the button so what we can do is actually create a function that renders the button so i'm gonna cut this one here and let's write the function let's call it render button [Music] and if form step is less than uh actually we can do a form step equal is more than [Music] two then we're gonna return undefined and else we're gonna return the button i'm gonna refresh the page so we can see how it's working um and then we're gonna of course use this render button here so right at the end render button nice so personal information next step billing information next step and actually here this is the labs last step of the form so we can say here create account instead of next step so let's code it in here [Music] so else if form step equals two then we wanna render this button that says create account okay perfect and if we click on it no button all right awesome you if you want to do this in production you probably want to refactor this into its separate component but i'm just going to keep everything in one file in this tutorial okay so let's move on to the actual tutorial how we are gonna add react hook form for this form so let's start by installing it i just use yarn so yarn add react hook form [Music] okay so because it's react library it's it uses hooks so we can import use form from react hook form [Music] and in the react way we can just destructor some values from here the first one we're gonna get is something called watch and what watch does um it listens to the form state in real time so we can always keep track of what's going on and we can use this to visualize what is going on in our form so i'm going to add a helper block at the bottom of the form so we can see what's going on [Music] so right at the bottom i'm gonna add three tags which render pre-formatted text and then i'm gonna use json stringify to render our form state and we can see it right here and currently there's nothing in our form state and even if i've write something from the username it doesn't show up here so to register the inputs we need to well register them so from the use form we're also gonna use register and in our input right here we're gonna use ref equals register and i'm going to save it and it's gonna show up right here that's how easy is to register different inputs and you can see the key for the value is going to be username this comes from the name of the input right here so next let's add some validation for this so for the username we want it to be required otherwise we're gonna show an error message so to add a validation we're gonna add an object here and we're gonna validate if it's required and they're required we want to be true otherwise we're gonna show a message like please type a username if we go here and no username we don't see any error so let's render that one [Music] to get the current errors in the form we need to use something called form state which is an object so we can destructure it even further so we want the errors so if errors username then we want to render errors username message like this and nothing shows up why this is because the default validation mode for react hook form is it validates only when you submit the firm but what we want to have is that it validates on every key press so let's add it right here in the use form we're gonna add an object and set the mode to all okay after i refresh is the page we can now see the error message here and it updates in real time let's style the error message a little bit so it looks more like an error message and i'm using tailwind css for the styling so let's change the text to be red let's make it small and add a little bit of margin to the top all right that's how easy it is to style elements with tailwind if you are not familiar with tailwind you're in a good luck because i made amazing tutorial that shows the latest features on it so click on the card on the top right corner to check the video out now there's one more problem here even though the form is not valid the button is still enabled what we want to do is when the form is invalid we want to disable the button so in the form state let's get is valid all right and in our button um it's going to be disabled if the form is not valid let's save it and yes we can see it's disabled and let's copy this for the create account button too done okay so after i fill the username the button comes valid and i go to the next step and we can see the username disappeared from the form state and this is something we don't want to happen [Music] and why this happens is when we unmount the component from the document it automatically unregisters it all of the components need to be registered so their value is interstate so we want to register the input when it's the current firm step but we never wanna unregister it so instead of saying when the form step equals zero what we can say is when it's equal or larger than zero this way we can have in the billing information step we still have the username value in there but of course we don't want to show it in the form we just someone to have the value so for this one we can use css to hide the element so let's add a class here and say if the form step equals zero then we want the display to be blocked otherwise we want the display to be hidden and this way it hides it in the form but still it keeps the value now let's copy and paste this for the other sections too so for this one we want the from step to b1 and this larger or equal to one [Music] and this one too [Music] okay let's save it out and see if it works i'm gonna refresh the page and let's see username address okay we need to register the address as it's not showing here so i'm just gonna copy and paste this one [Music] and please type an address we have address shown here and let's also copy their error message [Music] please tap an address okay and next step let's also register the checkboxes here [Music] for the checkboxes we don't want to show any error message so instead of tying typing the validation like this we can just type required true and let's copy and paste this for the other input tool done and let's see if it works [Music] yeah both need to be checked so create account and done congratulations all right bring good start now now it says congratulations but we didn't actually submit the form we actually didn't do anything so let's add the functionality that when you press the create account button in the last step it's going to submit the form and in this case we don't have any rest api value submit so we can just alert it on the window so let's do it now to handle the submission we need to get another function from here called handle submit [Music] and let's write a function for submitting the form so submit form that is gonna take the values from the form as [Music] the parameter and let's do bindo alert json stringify values null two and then we're gonna complete the form step and we're gonna use this one in the form so form on submit handle submit the submit form and in our button uh the create account button we don't want to have any on a click handler here and we want to change the type to submit right i'm going to refresh the page and let's see if it works out so username address accept and boom it alerts the form data here and after it's done it's go going to go to the next step all right awesome it's working really well so i can remove this helper from here so let's go to the bottom and just remove this one nice now we can add a little bit of design for the form so another great thing is so one great thing to add is kind of a counter that tells the user how many steps are in the form and in what step they are currently in so i'm gonna add here a variable called max steps that's going to be 3. and in our form let's do right over here we can say step [Music] form step off [Music] max steps and i'm gonna refresh so step zero out of three step one out of three so it works fine but we programmers like to start counting from zero but i guess for normal people they like counting from one so we can say step form step plus one of mac steps address and last step create account boom and here it shows step four out of three and we don't wanna show the step counter here so let's just hide it if it's in the last step only if form steps are less than the max steps we want to show this [Music] save it and done let's add just a little bit of styling for it so it doesn't look so bad so let's make it small a little bit of lighter gray and a little bit of marching for the bottom okay that's decent for me now one extra feature we can add is a small icon that allows the user to go to the previous step if they accidentally write some information wrong so let's get a nice icon from heroicons.com and i want a chevron icon so the shift from left i'm gonna copy the svg and i'm gonna make a button here of course nothing shows up so we need to add some styling here let's add the width to maybe six and text to pretty light gray maybe 400 awesome and let's add some hover effect so on hover text gray 600 perfect and to make this on the same line we can use flex box so in the div class name flex items center oh yeah we have the margin here so let's cut it from here and add to the flex nice and i'm gonna add a little bit of margin for the button too so it's not so close to the text so marching right too all right and now the functionality to go to the previous step so let's write a function for it so go to previous step set form step current value -1 copy and add it to the button so on click go to preview step let's see if it works out so fill user name and oh yeah we need to change the oh what is that the button type to uh button [Music] okay let's try it again okay now it works out and of course in the first step we don't want to show the button at all so we want to only show it if the form step is larger than zero perfect [Music] but one problem here is if i fill these ones go to the previous step and then go to the next step we lost all the information but i feel like that's not it's not that big of a deal so i'm happy with it all right guys that's the tutorial hope you enjoyed watching it and if you want to see more tutorials about react tailwind and software engineering in general hit the subscribe button and of course like the video if you are curious on how i style this form i use something called tailwind css and you're in good luck because i created a whole playlist of all of my tailwind tutorials that you can check right here hope you guys enjoyed this video and i see you guys next time

Channel: Austin Shelby

Views: 8,086

Rating: 4.9408865 out of 5

Keywords: react-hook-form, multi step form, react

Id: Wlz2cy33bMU

Length: 24min 6sec (1446 seconds)

Published: Thu Feb 18 2021