Formik (React Forms) Crash Course

hello everybody welcome back to the channel in this video what we are going to be doing is covering a great library called formic and what formic is is a library that allows us to deal with forms in react so when you just deal with forms with plain vanilla react there's three annoyances that you have to deal with the first annoyance is getting data in and out of the form state so typically this is done by manually doing a two-way binding and you have a handle state and then you have a ch on change and it just kind of gets a little bit annoying another thing that's annoying is validating the error messages so validation and error messages that can be very annoying as well and lastly handling form submissions now what formic does is it puts all of these things together in a very very simple and less verbose way and we're going to talk about that well in this video so you know what let's just get right into it so right here i have a plain react application up and running so go ahead and run this and what i did is i went ahead and i got rid of all of the styles and i added these styles over here inside of the app or dot app or app.css file so go ahead and add these styles and then also i added a sign up dot css file and this is a just a bunch of other styles very simple styles as well so quickly just copy them over here i have a text container which has a text align left an input and then a p tag and then a button so just go ahead and add those should be relatively simple now what we're going to do now is go ahead and run this application so let's open up our terminal open up our wonderful terminal and i wonder why it's i wonder why it's covering up the whole space let's press this button over here awesome and what we can do here is i'm already running my application but what you can do is you can do yarn start or npm run start so go ahead and do that now the first thing that we need to do is because we are working with formic we need to install formic on inside of our application so let's open up our integrated terminal again and do yarn add formic so you're an ad formic so the first thing that we need to do is well once we install it let's actually go to our ourapp.js file and let's just get rid of all this boilerplate so right now if i were to save this and go to our application which we are running on localhost 3000 we should see nothing so what i want to do is i want to create a form and very simply for now i just want to create a sign up form so let's go here we're going to say sign up dot js and i'm going to use the react snippet snippets to create a functional base component and then in here what this is going to do is it's going to return a form so it's going to return a form so let's go ahead and do that right now and then this form and let's close this off this form what it is going to have is very simple it's going to have a first name last name as well as an email that is pretty much all that it is going to return so let's go ahead and let us do this so what i'm going to do is i'm going to put every single input element inside of a div so i'm going to say input and then the div i'm going to give it a class name of input container input container over here and now we have our input now this input we're gonna give it an id of first name so that is the first thing and then we're gonna also give it a name of uh first name and then we're gonna also go ahead and give it a type of text so we're just gonna put this quick input right here and let's also might as well also give it a placeholder of first name so we know exactly what it is and from the client side and for this input right here i'm just going to show you how we would deal with forms in a without formic and just plain uh react so right here you can see if i were to refresh nothing happens of course because we have to render our component inside of the app so let's go ahead and say sign up and this should auto import it we should see our forum right over here awesome and we do so the very first thing is how do we handle uh how do we handle a typical input inside of react well when we type into it what we want to do is we actually want to store this data somewhere in our local state so the way that we typically would do it is go to our signup.js file and then what we would do is we would have some sort of state and of course we would use use state for this so we would have use state and then we would say that this is well the first name and then we're going to call the function set first name and so what this is going to be so right here this is going to be whatever the value that we have provided over here so to actually do this what we would do is on change when we actually change the value then what we want to do is invoke a function that calls a set first name and then it sets it to well the value of this input and we can get that from the e so the event.target.value so if you were to save this now let's just quickly inspect here and let's also console.log the first name so console.log the first name state and then if we were to go to the console and if i were to type now you can see that it changes accordingly which is awesome so now what we can do is we can actually have this located inside of our react state and whenever we need to do something with it so maybe even submit the data we can just use that and so another thing that we also have to do is a two-way bind it so the value should also be equal to so the value should also be equal to the first name state so we should go here we should say first name and that's typically how forms are handled inside of react but this can get very cumbersome now what if what if we have multiple inputs so we got multiple inputs and over here this time this is the last name last name and this is the last name here and then this is the last name and we're gonna have to do the exact same thing for every single one so this one we're gonna say is the email email email email and then over here we're gonna have to do the exact same thing so we're gonna have the on change so we're gonna need a new piece of state and then you a new piece of state for last name as well as new pieces state for first name so we would have something that ends up looking like this uh but of course this would be the first name or and this would be the email now what we could also do is have them all in one object but it's just it's just getting a little bit messy and it's not really uh fun to handle so this is where formic comes into place so what we're gonna do instead here is utilize formic so let's actually keep what we have so far and we're gonna see how we can replace what we had with formic so the first thing that we need to do is import something from formic so we're gonna import something what is that something i will tell you right now from formic and this thing that we're going to import from formic is a hook called the use formic hook and now what we can do is inside of the function itself you can say and let me just quickly save this so we can auto format it better you can say const formic const formic is equal to use formic is equal to use formic and what this is going to do is this variable this right here this formic variable is going to have a lot of really cool properties that we can utilize to make this process less verbose and a lot easier so the first thing that we need to do is first define like we did over here first define the initial state of our uh our inputs so our initial state is as you can see here is an empty string for all of them now i know this is all first name but you can imagine that this is last name here and then you could change this to email and then over here we can say last and over here we can say set email so you can imagine that these are what's used so the first thing we have to do is define the initial state which is empty string for each one of them so we could do that by supplying the use formic hook with an object and saying we want to define the initial values so the first thing that we want to do is well provide it with the um with the first name so we're going to go ahead and provide it with the first name that's the very first thing that we have to do and so the first name we're going to say is an empty string initially so it's an empty string initially and now what we can do is we can say the last name so the last name is also an empty string initially and then we can also say that the email is also an empty string initially all right so that's cool so now we have set the um now we have set that this is the initial string so now what we have to do is we have to say that this right here whatever this value is well this is going to be the value of the input not whatever this used state hook is utilizing so let's go ahead and do that right now so to do that what we can do is we can say formic and then what we can do is we can say dot values and so this formic so what this hook is going to do is provide a a an object this this form a variable is going to be an object with a bunch of properties one of the properties is going to be values which is an object itself that contains these values over here and what initial state they are at so what we can say is dot values and then over here dot first name so if you were to save this and refresh now over here what we can do is well we can't type we can't type on any of these now for this right here there's some weird logic going on here but if you were to look here and if you try to type into it it's not going to work because this is always going to be an empty string so now what we have to do is actually two-way bind it so what we can do to do that is something very simple as well instead of doing this complex function over here what we can say is formic dot handle change and it's going to know exactly what uh what value it needs to handle change in basing it on the name of course so now if we were to save this and now we're to you can see here that this works completely fine and let me actually just quickly go here and let me console.log let me console.log formic dot values i'm going to go ahead and console.log that you can see initially it's empty but you can see as i type the first name is changing and that is really really easy a lot simpler than what we have had here so we can actually do the same thing now with uh with uh the other one so let's just copy this and paste it in there copy this and paste it in there and this time of course we're going to change this to email and we're going to change this to last name how easy is that so now if i were to refresh you can see that i'm able to i believe i'm not logging it let's go ahead and log it as well for make dot values i'm just gonna console.log that refresh you can see here that the first name is getting changed as well as the last name as well as the email so you can see here how easy it is to two-way bind and now what we can do is we can completely get rid of this used state and completely get rid of this as well so that is what is terrific about formic it is really really really really simple to handle things like this now that we have figured out how we can two-way bind data and manage form state with formic let's talk about how we can utilize that data when we want to submit it so for example what we might want to do is have some sort of button right over here and then once we click this button we're going to do something with this data whether it's an ajax request or just calling some function inside of our application for this very simple application what i want to do is just output the data for each input form inside of a alert or console.log i'm actually just going to do it in a console.log so simply what i want to do is once we submit this i just want to console.log the value for the first name as well as the value for the last name as well as the value for the um the email so what we need to do is somehow get the value from a formic within the from formic that is over here inside of the initial values so how do we go ahead and do that well what we can do is inside of this object that we supply to use for mchook we can have an on submit method and what this is is going to be a method that is going to handle the logic for well on submit so let's go here let's have less curly braces and so the first thing that we need to do is get these values over here and they're actually supplied to us as the first parameter so the values so now what we can do here is do whatever it is that we want with the values for us what i want to do is i want to console.log the values so awesome so now what we need to do is was create a button over here inside of the form and this button is going to be of type submit and i'm going to give this text submit so let's go here and if i were to refresh this well nothing really happens so you can see here we get this kind of weird default refresh behavior and it's really annoying so now what we need to do is actually somehow bind this function to the form that we want to submit with so to do that what we can say is very simply on submit and we can say formic dot handle submit very simply and what this will do is what it's going to do is going to prevent the default as well as it's going to call whatever is inside of this function so let's go ahead and refresh this and now if i were to add some data you can see that it works perfectly fine and again we can also handle http requests in here of course but we're not going to do this for the purpose of this crash course the last thing that we need to talk about is validation so what do i mean by this well right now we're actually able to submit this and call the on submit method without providing any sort of input or what i could also do and i know we have html validation but if we didn't have that html validation let me just get rid of it for now let's say i were to get rid of the type email maybe i were to change this to text by accident and if i were to submit this right now what we can do is we can get this and this isn't really a valid email or maybe this is way too long this value over here this first name is way too long and we want to make sure that is not at the as long as uh well whatever this is so we need to of course validate our data and formic actually makes us super super easy as well so let's go ahead and let's validate our inputs now to do this formic works really well with another library called yup which is a great validation library so that is what we are going to install and work with and if you don't know yelp that is completely fine it's super easy so do npm install yup or yarn add yup so let's go ahead and do that and now as this installs what we can do here is we can actually go ahead and import you up so we want to import everything from yep so we can import star as yup from yup so now this again is a validation library that we can utilize to validate our inputs so the first thing to do is when we want to validate these inputs we have to say inside of this object we want to define the validation schema and so the validation schema is going to be an object but because we're using yup we're going to define that this is a yup dot object over here now we also of course need to supply it with the comma now in here we could supply it with uh the properties so the first name last name and email and then their rules their set of rules let's actually begin with the first name and so the first name we're going to say that this is going to be well we have to first define that it is going to be a string so we're going to say yup dot string and then we can of course append any rules that we want so for example maybe i don't want it to be larger than 15 characters so i can say max 15 and then i can provide it with some sort of error message if uh well it exceeds the rule which is 15 in this case so we can say must be 15 characters or less and of course now what we can do is append another rule we can say that this is required that means you can't just supply us with an empty string so we can say required and then if you get some sort of error message you could just say required so let's go over here and let's say required and also by the way what i did is i imported the uh css the sign up css so we can get those styles in as well so right here we have this which is awesome but now okay so how are we able to actually well see the errors and notice that we actually didn't do any sort of binding we didn't do any sort of uh uh handling the error state ourselves it is just going to figure it out by itself so what we can do here is to see all of the errors we can do formic dot errors so formic dot errors so let's just quickly do a refresh and you can see formic dot errors is initially let me just zoom in here a little bit is initially where is it is initially this over here an empty uh object and now if i were to type into it you can see that is again still an empty object but now if i were to get rid of this and i were to scroll all the way down you can see now first name has this error of required and let me just get rid of all this other junk over here let me just zoom out i'm sorry guys um and now if i were to add more you can see now we have this error right here so now what we can actually do is actually utilize this to our advantage so what we can say is and one thing i also want to note is if we have an error and we try to submit it nothing happens so it's cool that it actually the on submit it actually looks if we have any errors if we do have any errors it's not even going to go ahead and submit it so that's just something that i find very very cool all right so let's actually go here and now what we can do is below the input what we can do is we can also display the error and now and this is the email input so i'm going to display it below the uh i'm going to display it below this input right over here so let's go ahead and let's do that so what i'm going to say is hey if we have if formic dot errors dot first name has some sort of error then what i want to do is i want to display a p tag that that displays whatever this error is so formic dot first name dot error and of course close the p tag else then i just want to display null so let's go ahead and save that and now you can see that we have this really cool error so if i were to refresh this you can see we get this error if i were to completely get rid of everything you can see that we get this required error now of course we can do the exact same thing with the other other ones as well so over here what we can say last name last name and then over here we could say maybe this is 20 characters so must be 20 characters or more and that's really all you have to do so now what we can do here is if i were to refresh this and we're to type you can see that we get this really weird state we haven't even touched this part over here but for some reason we're still getting this error we're going to fix this a little bit later but now if i were to go here and oh of course what we need to do is add the error message so let's go here and let's go here and let's say last name last name here so let's add that error message you can see that this is required so we have this really weird state where i type something and then we have an error message over here and that's something that we probably don't want to do so that what what formic does is that it actually looks at all of these statuses and how it validates the schema and then it shows that hey there's an error now what i want to eventually do is hey if i haven't even touched this yet if i haven't even touched this input i probably don't want to display this error so we shouldn't get a weird state where i type something in like this and then we have an error over here but however of course if i touch this and then i went ahead and i got rid of it then i should get an error but i shouldn't get an area here as well as i shouldn't get an error here until i have actually touched that input use that input and put some sort of invalid text so this is some sort of weird state that i'm going to fix a little bit later okay cool so first thing let's just validate the email first it's the last thing that we need to validate so we're going to say copy this over here now the the validation for this is going to be a little bit different so we can say email here this yes is going to be a string and we can say that this is going to be an email so this is going to validate it's going to have some cool regex that is going to validate that this is going to be a valid email so you can say invalid email address and we can also say that this is required so all right that's really all we have to do and then of course i always forget the last and most important bit is actually showing the error itself so in here what we want to do is we want to show this error so we're gonna say email we're gonna say email here and then we're gonna also say email over here and that's it okay cool so let's just look at this really weird state where when we click on it you can see we have all these errors whereas again what i want to do when i misspelled uh the email part valid right here and again what i want to do is only when only when i actually touched it and i'm providing some sort of invalid email that's when i want to showcase that error so let's go ahead and let's fix this right now so to fix this what we need to do is somehow figure out if we actually even touched that input so what would it be if i touched that input well right now i touched this input and i didn't touch the other two so this right here it's touched value should be false as well as this one should be false this one should be true so we what i want to do is okay if the there is an error in this input and it hasn't been touched or and it has been touched rather then i want to display the error but if it hasn't been touched i don't want to display the error now what we can do is actually utilize a very handy method called formic or formic dot touched and what this is is going to be an object that's going to contain boolean values key value pair boolean values for the first name last name and email indicating whether it has been touched or not now to do this what we need to do is to for each input is to actually supply it with an on blur value so we're going to supply it with an on blur value so we can get that touched property so we can say formic dot handle blur and i'll show you exactly what i mean by this right now and what i'm going to do is i'm going to go here i'm going to say dot touch formic dot touched so if i were to uh uh if i were to now click on another one you can see that the last name the first name has been touched this is true and now if i were to go ahead and uh now type over here you can see that the first name has been touched and if i were to submit this you can see uh you can see that we have everything but you can see here that in the touched value you can see that all these have been touched so you can see here that what it's doing is it's tracking the the touched state of our input forms so what we can say here is very similarly and we need to have this on blur in order to handle the state for each input you can have here a handle blur as well here as a on blur as well and then over here we can also say formic dot touched dot email and and so we can say hey has this been touched if it has been and it has an error displayed the the uh the error message so we can say here last name and then over here we can say first name okay so now what we can do if let's just refresh this so now if i start typing here you can see here that the error message doesn't exist it only exists once i actually hit the as you can see here once i actually hit the error that's when it actually submits so you can see here now it's required but now if i were to go so now this has been touched but i completely omitted it and so that's why it has uh failed so let's go here touched failed touched failed but however of course if i go here and i type nothing is happening so you can see here now we're getting i would have presumed we're going to get the the uh the the the error there we go so as you can see here we're getting the errors that we want to get awesome so that is pretty much it and that is pretty much formic i hope that makes sense and i hope you guys are excited to utilize formic for your next application

Channel: Laith Harb

Views: 3,916

Keywords:

Id: vJtyp1YmOpc

Length: 28min 26sec (1706 seconds)

Published: Tue Oct 12 2021