Manage Forms the Easy Way on React with Final Form

Key Takeaways

hello guys homeroom and welcome to a brand new video toriel from I promise so today groove God is actually bring you visitor with react and Final Four so we're gonna get into using react with final form one of the best and high performance and subscription-based form states management so if you're looking for form stage management's I don't know like components that's basically or specific libraries that allows you to do stage management for your react forums from the ground up with the subscription-based components and everything is built around the subscription base and of course it's gonna be high high performance so if you will look for that final form should be doing a great job for this I've been looking or working final form for quite some time right now I built a lot of things that puts a lot of forms using it and it's still doing a great job even though the your form is gonna grown up even though it's nested has a lot of fields it has a lot of options you're still gonna get the best performance out of it and the best stage manager for final form I know there's a couple of different things like for maker stuff but I so fall in love in Final Four because it's simple the April is straight through and straightforward and you don't really need any configuration at all because final form gives you everything out of the box and of course it supports hooks like pretty much anything now sports hooks but I still still use the final form API pretty straightforward and pretty easy to use so I'm gonna be doing today is actually just digging deep into the final form it gonna take a look on the API try to look in the documentation real quick and of course we're gonna simply see how we can use this to build our simple form with like simple validation and see how everything can be tired up and of course I'll show you my own build paradigm or my own concept of how it just gets into using final form with my reax application how I structure the components how I put everything in many different folders at how it puts my components together in order to out of the best like a clear code and it's much more readable and how we can use all different things in here so if you want to look for the documentation can just head into final form org you gonna show you how you can install that it gives you actually quite a lot of options and how you can do a lot of things like the API and think it started through God and everything else but what I'm gonna simply do is for sure I'm gonna start with creating a sandbox I'm just gonna get into head code set boxed on IO and of course I'm just gonna select react so just use the react template to build a simple and straight through reacts application projects in here and of course I will start building it from scratch exclusi this is the basic thing that you're gonna get out of it from the Final Four for sure so it's pretty simple pretty basic I'm sure it's pretty straight to the points so what I'm gonna be building at first is let's say I'm just gonna get rid of this h1 and I'm simply I'm just gonna do in here we actually find a fall and what I'm gonna be building is I would actually puts like a couple of components always try to do something like a login form just a simple login form with a username and a password and eventually we're gonna end up like doing some validation of the username you can like imagine it's much more like a register for me to some validation of the input and of course you've got all the values all everything all the controls right in your fingerprints so you can just control whatever you wants from the final four for sure so the first thing that you need pretty much to do or add a dependencies there are quite a lot of dependencies that you need to do so I'm gonna first go in like the focal part so it is a final form and there are two different things like the final form and the react final one we're gonna need both of these so just select the final form and you need to like to react final form again I'm sure we need to add react final forms as well and for like different things we're going to need to we can use like a style components just give us our components a little bit of a better styling and I would love to do that just to make it looking a little bit prettier and of course the UCS SMG is so I'm gonna use style components if you're not familiar the side components on how it works you can find like a video tree of mine on my channel for sure or how you can you start components what they are and what is the benefits fusing style cut corners verses using regular CSS stylesheets and it's gonna click to the validator and then just install another package called validator and this package allows us to do is simply just to validates the input and it's just like a very basic API what this library or this package provides so we can just do some kind of validation on behalf of the final forms you're gonna use this helper functions to do a quite a lot of apology from numbers to string to emails and different stuff you can use across your altercations for sure so right here I'm going to get into the SRC I'm going to create a new folder the nameless components and here while you're gonna see in the next couple of minutes so how I structure my components from every application they work on every website for every platform I create I go and structure my things like this I pretty much like this or how we can structure the final form to make it look of course works perfectly ever sure to make my code readable for other co-workers for my other teammates for sure to work with it so how I structure my car there's gonna be a lot of beneficial side for your guys so you learn more how things actually done behind the scenes for my side so I'm gonna create a form dance components and this components what it does it's simply going to just make everything like it's gonna hold up the main form components so I'm gonna start putting getting reacts from the main reactor cage so the next thing I'm gonna get for and I'm gonna change the name of this to final form so I'm gonna get the form components which is the main components from final form for sure because final form what it provides to you it provides the form components as a three-issue in here and it provides actually the field so form is actually like a sub of fields and of course you can have like different fields each field group the specific inputs is their normal impulse you can like your own custom inputs you can include fuels in your own custom inputs if you'd like to see like more video tutorials or final form you can do your custom inputs just let me know in the comments below I'll be very happy to do that for you guys for the other anything else you could probably think of it like doing something like put in a field and of course it's an import text input or step drop down or pop up anything anything pretty much related to an input you can use the field on that so I'm going to here export function and of course I'm gonna use my own API here so I'm gonna just provide or abstracts the final form API and make it much easier for me to use actually because my application doesn't need everything the final form actually profile so just gonna make it much better and much clearer for me to work with so what I'm gonna do in here I'm gonna just return the final form for sure is clearly seen here so I'm just gonna return the final form and close that and for the final form it has two different things it has first you have to provide which is required the unsub may prompt so whenever you submit it you cannot run this handler so what I'm gonna just just do get from the possibility or submit and the next thing you can use children or much better what I would like to use is the render path which pretty much allows you to use the render panel from reacts which means do you provide with the props through this function and of course you can have like a return of components that is gonna be rendered eventually so for this we're gonna just grab you and your props so if you're not familiar with this kind components basically you can learn more about it in if you can find the video into my channel for sure for like the best or the most user reacts building parents and how you can basically use it for your favorite how you can learn more about them because they are super easy and super straight through so for this one I'm gonna return I'm just gonna like render a simple basic or standard HTML form and of course this which is pretty basic and standard so I'm just gonna have like an HTML form and inside of that of course we're gonna just provide the unsub man so whenever we click the submit button on the submit event of course we're gonna just go handle submit from the props we could just do passed on something there but it's much better for this and here I'm gonna use when do props against I'm gonna use render props throughout my form components into outside of the four components of course I'm gonna abstract the final form API to make it much simpler for me to use and eventually I can get my own API in here to work with my application in a simpler and clearer way to work with so I'm gonna do profit or children so I'm gonna render up the children with a renderer prop so I'm gonna rent to them with a callback basically passing them the renderer pass which is super important for us to do is to get the render pass because their enterprise has all the details for our form so it has the state of the form like the values of different fields it has like submit errors it has validation errors have like have pristine form or if you have a dirty tortured inputs or fields actually all the different type of things and of course it has the standard HTML form API which allows to interact with form like you can prevent some specific actions or you can trigger the submit my annealing or something like that so it has everything the whole states actually on the renderer perhaps so it is very important to pass the renderer perhaps through to the foreign key polish now the photo browser has actually been finished what we can move on is actually the the second apart or more public more opponents components server that's is the input so the input component what it allows us to do is of course it's going to represent a field so right now we're only gonna use like text compare or text input components or fields so we're just gonna have this component for now but later on if you want to like a custom components that let's say it is a calendar components that allows you to choose days and you you want to just include it and use it with the final form you have to provide your own data or API abstraction or component to the structure throughout so you need to provide the final form and link it with the actual component so you can exchange the the balance between both of these specific components in order to be able to use a custom component spot for this we only have input so you can just use the field right over the box without any issues so that's the most important parts as I've said before and that's actually how I'm gonna work with it so I'm just gonna start with doing a first reporting for UX for sure so as always any components needs the reaction port or the top we second need the salt so I'm just gonna use some or just add some salt to the input to make it look a little bit better so I'm just going to start components and eventually I'm gonna use the use field so I'm just gonna use the hooks because a lot of people love using herbs and one of them actually me I'll do a door usually hooks versus the old legacy API just hopes now now are super clean and super nice I can't get around without using them it can't just build a project without using hooks because they are very important for me actually from the day they came in I just love them that much so I'm gonna do an import wrapper and basically for this I'm just gonna copy the code because it's gonna take forever for me and it's just like a CSS style so I don't want to spend thousands of hours just retype in CSS styles so just gonna copy all of those I'm gonna explain exactly what each component or what each sock components does so there's the input wrapper which just holds the input of course it's gonna have like a flex box and the aligned item is gonna have what two columns for this flexbox the Flex style actually is actually going to be : base which means we're gonna have like an impulse and right beneath it we're gonna put like an error text so if there are any errors in the validation process which is going to display these errors on red there is the impact container which is the main important experiment using the input and of course we got some stuff that like Hoover and everything else regards I just feel actually accepting a Provost error so you passing an errand hearing it there are any errors basically of course we're gonna show up the red thing so just gonna make it look much better for that and the most important points for that this of course the earth checks components was just gonna display or show up and air attacks right beneath the input form or the input field and for sure it just going to be used for validation or any errors to show up there is an error on this specific input or not now the most crucial part for that is actually the input so I'm gonna do just gonna export a function components and of course I'm going to name it input clearly here and simply I'm just going to costs and for sure I'm gonna get two different things I'm gonna use the use field hook and the use field just gonna give you you basically gonna give it like initial values and of course the most important part is the field name so how final form actually keeps track of all the fields inside of a form is actually using their specific unique name so each field has to get her specific or its specific name in order to be able to control it and of course use it or fetch the other formats or just manage it manage the state of it and any anywhere in your application so it's very important and very crucial part is actually to provide a specific unique name for each input field for that so what we can do in here um I can extract the input and of course actually allows us to extract the metadata so we can guess like any errors if it is touched or not for the input of course and if the input has is submitted so that's basically where is and of course I'm gonna use the use field so that I've just got the used field is close in here it takes first the name so I'm gonna get the name from the perhaps so every employee is gonna provide in a name and for the configuration here I can pass it like initial value so I can do props the initial value if there are anything and make sure to passing the validate function because it is very important as well so to do that do props top validate or anything and of course you can get the full day's functioning here it's gonna use it later on for doing some validation of specific input field and we can just get it from the profs in here whenever we try to use the input simple enough so that's basically what we need to do it's not really that much so just gonna do cause input props now I'm just gonna put this input props objects just to put all the props together just to make it clearer and easier to understand nothing really special about that objects are just another yet JavaScript objects so I'm gonna just do es6 extractor I'm gonna just get the error and if you have any touched and if there is error so I'm gonna do trip exactly there is an error here and of course we want you to get passing the inputs which is very important because the input props has to be passed into the main input or the standard HTML input otherwise it won't work so here what we can do is actually the import blocker so for the input wrapper I'm just gonna pass in the input record so just gonna wrap everything up and there is two things there is the input container okay yes so there's the input I can't type okay so that's a perfect inner okay I don't know why code sandbox doesn't have like emit enabled by default but yeah it doesn't have Auto completion enabled by default so the input container here I should have included that anyway you got points so we can just pass in the import props so there you go and the other thing I can just quit some air attacks so here the air attacks if there is any errors we will be able to track them right here so so mission it cause if there are if it stops actually and so if the input is actually touched and if there are any error or if it has a submitter so error and submit are quite different error means a validation error but I submit or if there is any previous submit arrows from triggered by hidden sub memory hidden enter and yeah so you can return any errors from the on submit function handler in order to trigger that more specifically so the submitter if there are anything so we can just do the errors otherwise we can just prints in an empty text which means it's not gonna show up anything at all so that's your trick just do an empty checks for doing that otherwise just put in the actual error so there are a submitter and everything otherwise another other than that just we won't be able to see the earth text in here and which means there will be no errors whatsoever but for the implicit change white beneath it or right above that it's general represents the main input and of course you're gonna be use installed so it's gonna look much much better and of course here we provide in the error because style needs this profs to error in order to be able to decide which start to apply on border or either the box shadow or outline or the specific colors and stuff in order to you know be able to figure out if it is error it shows like a red border or box shadow if it's not just gonna just use a regular color and that's gonna make much very user experience for course because red color plays a major role or showing a specific error happening on that specific part of the application or v4 side so that is that and we got the input right beneath and and everything is actually set enough for that so the most crucial part here so just like a god the form of the inputs for the site components now they are but pretty much reusable so throw your whole application if gods like huge application you can reuse all of those but whenever you need a form and couple of fields or inputs you can just put in a form and just like nested inside of it as a child specific inputs with our labels and stuff and you can use them right on the box without any issues and yeah that's that's pretty much the thing about using this specific paradigm I just wanted to show you that because it looks much better helps me so I'm just trying to share with you my experience with final form and how you can like structure your whole inputs and components together to get out of the best so the most part here and we're gonna get into the up dog JavaScript so the up dog is it's gonna be responsible for rendering everything and of course I'm gonna just be able to play me kill post out from song components and basically of course I'm gonna need to import a validator value I'm gonna use this value later also do some validation well I need to import from Paulo's sure do forums from proponents for there you go everything should be pretty much clear right now and of course it needs a couple of more style components in here I've already set up and created so just for the sake of time I'm just gonna copy paste that because it's just just a normal CSS and we're not doing a CSS story in here so basically you should be able to understand to figure out what this thing does and because it's pretty simple just using flexbox and here shows label here's actually a form wrapper to wrap the whole form and make it just centered and this is actually a group so a group holds like a label and its input to show us more specifically and the layout should be centered where the label is actually above the input and it has some like our G in between those so it looks pretty clumsy and everything should be looking fine right now the most important parts in here how we can encode before so since we use it the phone render tops API from react so I'm just gonna use it normally simpler to form again in here and of course I need to pass seen the children but the most important part is actually need to passing the unsub metals upset before because it is an a required function so or basically a required props or that and it has to pass in here for this I'm just gonna pass in an empty one but what you can do with this will actually submit so you can do a console dot log and some knitting and of course you get the values out of this so if you wants you can just get the values the currents for values from it and should be you know you could provide that throughout the whole altercation but the most important part is here not to render the fields you need to use like render props so the render process for what it does is we gotta props first so just provide a callback in here for the react and we can do props got that's for sure for the props what we're gonna be basically rendering our first runner-up of form if something is wrong with codes emboss for some reason so I'm just gonna do a form wrapper and there you go form wrapper and so for this specific form wrapper I'm gonna have like a good right beneath it and I'm just gonna group there you go it is hard to type these days of course you gotta have a label okay code sandbox seems clumsy I don't know why it's flickering all the way around he just doesn't wanna off alright there's something wrong with this clearly there you go cool now we got label so we're just gonna put like user name or anything like that and for sure here we need to put the input down once we can do import input of God's pump fats so the input as I've said before we need to provide a name so each field from the final form has to get a specific any unique name on its form so only on the phone contacts between the other subfields of course it has to do get a different name from the other fields but if you get like another form you can use the same name because the context of the floor has been changed and you are actually working on a different form so that doesn't matter anyway but if you are asked the same form you have to use a specific and a unique name for that for that field basically so I can name it using it make sure just to choose a simple names just to allow you to like work with it the better so holder a place for words your username and yeah so that's basically what we need to do without as clear see new this is the fork and we should play with it however we would like there's a hello world or anything and that's how we can do our using it now for this actually formatted that for us thank you for sure I can probably based this such to change that or I can change this to a password you get here thanks great okay pasture okay now I got username and password and just to make sure that the form actually works what we can basically do all right I like just gonna try to include something like I can put this and I can change this to a button so I'm just gonna just put a button okay there you go submit or just your anything go got a really small bar it shouldn't look that much clumsy but here we're just gonna change the type to submit whenever we click it of course we're gonna guess this submit from the console so if you'd like to take a look on the console right here and let me just just pull off ads and there you go so we got reacts I've tried to screw see we get so many because it works and it on submit basically works so that it triggers everything else and the most crucial part we've got just the for me here and of course using render props we are rendering a single input with its own label and everything is laid out with the name and everything and of course if we want to get the props and this is actually the render props are gonna be needing just to be able to do that so let's try if we just clicks let me just go and get the values in here just to show you how the values looks like so just going to put so whenever we click or values our embassy because we've got no objects but I offer do something like that I should actually look and give us the some specific values from the field so go use your name and sure password or anything so to change that click adjust here again it changes and so on and so forth so it basically works and it gives you the values and you can work with it basically that is also the perhaps if you want to look on the perhaps there are everything that you need for the perhaps there the whole form state sphere such tour not so you can take a look on the API here I feel like on the form API or the form state so the props gonna represent I'll show you the whole form space state so you guys like visited whole values of course from values is validating is it valid touched so just give you an array of which string to start with which field the size if it is submarines submit succeeded submitters pristine invalid has validation error blah blah blah a lot of things now yeah as fish in here pretty simple pretty basic set up and it is straight to the point so we didn't seek that much of time to set up the final form with all react components and of course use a reusable form input components right on the box from scratch now what we can do to make that much were actually adds some validation to and lightly enough we use it the validator package which just gives us much I don't know ready-made function for us that already takes like a string and of course we chose true or false depending on the specific validator for sure so we can do like validator does is it an email or is it a like specific is it a phone number or is it a number of is it maximum of three or minimum of three and of course it checks the string you parse it using three Jaxx's and different stuff and it returns two or four so we can use the help of that in order to do the validates so remember we got a validate function so let me just take that down there so there is the validate function and the vault is a functional it takes is actually a callback it gives you the value and of course you have to return and define it if there are no errors no validation errors or you have to return a string that's going to be printed as an error so you basically got the points and define it if there are no errors which means success no errors at all but if you return like a string this string is gonna represent the actual error text that's gonna be displayed on that specific inputs that has of course the validate props so you can use this vault a perhaps which I do recommend the most or you can just like you know provide a valid Asian it here so if you see another submit we can do like validation or validator so you can do a validation of course it function gives you the values and of course you have to return the object that has the field names so in objects with the fields names as a key and the value of them is gonna represent the error if there are any or undefined if there are no errors but I would like this as much better because it's much easier to deal with and much more readable code for me at least but you know you choose whatever you would like to for that specific case so we're gonna do I'm gonna use the validator and I'm gonna say dot is email so how to check if it is an email of course you cannot provide it with a string this one's clear she returns a boolean so we say if it's not an email for V at sometimes the V if the input doesn't have anything V is actually undefined and you shouldn't like passing and the fight to the east email or the validator functions any function so if it's not or it's not valid means it's in the fight or no we're just gonna pass in an empty string just to markup I passed this issue and of course we won't have this error also this exception won't be erased and so here is actually gonna put the text so it's not an email and we're just gonna give this this error text so we can do Chris please ensure a valid email okay so we save that and of course sure if s s looking she was fresh browser I can do you notice so I can just type in staffers excretion of arrays but what if like they take this screw C boom we got there and the inputs much better is actually reacting with it error because we created the impulse clear seen here the input gets if there are any errors it is touched and it has an air of course we're gonna do true and for this true this input props gonna pass into the style components input container which means this one of course is going to change the stage and change the style and everything is going to be tired up together to get this clean looking form with a cool input and a cool like how very fast and a cool form validation of course most importantly against the tanks please enter a valid email and so on and so forth so you can use as well as this for I don't know for the password so if we change this to password I don't know to age or something like you can do your age anything here of course you can pass in the validator and you don't check for email so you can do is max or anything I don't know what the easier things here as let's see is the MAC address is in the Merc is it disembarked okay so check your string contains only numbers and you have to please enter a valid for that so this is actually if you interrupt this we guys please enter a file age member five we do something that's of course it doesn't represent an age you have to check if maximum minimum the age but most of all just check if there are some inputs or evolved numbers or not and of course it does test so screws in here for the register I don't know if we try to refresh that click on the register and of course it triggers that and much better what you can do you can say this bone is gonna be disabled if the props dots I don't know if it has props submit there is or anything let me just check out the documentation real quick to see what is the name so dirty has submitter so it has any submit errors this is boolean gonna be true so we're gonna have a disabled poem which is much better for sure so save that refresh that again and so if he has any errors let's see I think it doesn't support disabled or something this problem but it should basically work with that because I just set up with a custom start component button and it works as sharp as it is so it should actually block that it doesn't love it but so enough pretty great and the whole vision works pretty fine without any issues or stuff so yeah that was it I hope for you guys you've enjoyed this video tutorial I just wanted to show you how to use final form with react and how far your form works and how using or what is the feeling of using a form states management with your application versus without using them specially on a react based application it's gonna save you a lot of time I'm gonna just make your like world much easier to work with and of course you're gonna enjoy working every single time with it I just since I discovered the states management from form X to final form redux for I just enjoy everything for that and I still love using every single one of these so thanks for watching us if you still want to use integrate this with Redux you can just take a look on the final form spy components which allows you to despite the data from your own local form values data to the redux tour and vice versa I think that's watching I said it before hopefully you guys you've enjoyed this video tutorial and if you would like to know more about final form or any kind of video choice just let me know in the comments below hopefully guys you've enjoyed just hopefully I would like to from you guys actually to press that subscribe button because a lot of people are not subscribed watching my videos so please go down below click that subscribe button enable this notification builder get notification fly videos and for sure why not just push that like button to make me much happier and yeah I would love to see how interaction or how excited you are for this comeback so I think that's watching I said before see you all hopefully in the next videos