React Formik Tutorial - 4 - Managing Form State

welcome back everyone in this video let's understand how formic helps us with managing our font state but what do I mean by that we know that our youtube form has three fields name email and channel at the moment though we are not tracking the values of these form fields let me type in something the value of the field changes and in react if a value changes we need a state variable for that we need state variables for name email and channel or collectively we can call that as the form state the form state is nothing but an object which maintains the value of the different form fields if you change the meme to Vishwas it should be reflected in the form state object if you change the email to we at example.com the form state again should be updated similarly change channel to code evolution and the same should be reflected in our form state if you are able to manage this form state we can eventually submit this data when the user clicks on the submit button our goal in this video is to learn how formic helps us manage this form state whenever the form field value changes let's go back to BS code and understand that let me quickly recap what we have so far we have a component called YouTube form and in the JSX we have a form with three form fields name email and channel we've imported the use form a cook from formic and we have called that hook passing in an object an empty one right now and I have mentioned that the use for make hook returns an object which we are storing in a constant called farm ik and this object contains the properties and methods for us to manage our form state let's see the first step is to pass in a property called initial values in the object we pass to the use for McCook so the property is initial values this is camel cased the initial values property is an object this object contains the initial values for all our form fields named empty string email empty string channel empty string it is very important to note that the properties for initial values correspond to the name attribute of the individual fields name email and channel so step 1 pass in the initial values for your form fields step 2 we need to add the unchanged and the value prop for each of the form fields this is required to ensure the form fields are tracked in react by farming let's start with the name field on change prop and value prop of this is where the farm ik constant comes into picture for unchanged we assign farm ik dot handle change and for value we specify farm ik dot values dot mean once you do this formic will automatically track the form field values for you let's do the same for the other two fields as well for email on change is equal to form ik dot handle change value is equal to form ik dot values dot email finally for our channel field on change is going to be equal to form ik dot handle change again and then the value is going to be formic dot values dark channel of this name email and channel again correspond to the name attribute name email and channel I'm going to quickly format this and in the render method mint add a lock statement will be log form values formic dot values so we want to take a peek into what for MCDOT values actually is which we are using here for our value problem all right let's save the file and test this out in the browser I'm going to open the console and on page load the first thing I want you to notice is the forming dot values object it is an object where the key corresponds to the name attribute of the form field and then the value of that form field initially this is nothing but the initial values object we have specified if I start typing in the name you can see that the mean property now updates with the value update email and the same happens finally the channel name so you can see that this forum ik dot values is an object which always reflects the state of the forum this is what we are feeding back as the value to the form fields right here the handle change method is formics helper to update the values object now if I said the initial values for name to be vishwas you can see that on page load the meme is already set to vishwas which is reflected in the values object this is pretty much how formic manages the forum state let me go over it one more time so that you have a proper understanding step one we pass in the initial values to our use for McGuirk the properties must match the name attribute of the form fields name email and channel this initial values object is mandatory second step we need to add the on change and the value attribute or props to all the fields that need to be tracked the unchanged prop is equal to a form ik helper method called handle change this method will basically read the name attribute and update the corresponding property in the values object the values object will contain values for all the form fields we then access each of them individually and assign it to the values prop on each of the form fields so the flow is as follows first take the values from initial values object and set that in the values object then when you change the form field values the unchanged event is triggered which fires the handle change method which will update the values object when the values object updates it is passed back in the formfield this cycle ensures that the form state is managed correctly so at any point in time farming dot values will give us access to the form data keep that in mind all right now that we are able to manage this form state in the next video let us see how we can get hold of this data so as to submit the form thank you guys for watching I'll see you guys in the next one

Channel: Codevolution

Views: 46,919

Keywords: Codevolution, React, ReactJS, Reactjs, ReactJS Tutorial, Formik, React Forms, React Formik, Forms in React

Id: c4EdCbk3K1c

Length: 8min 40sec (520 seconds)

Published: Mon Apr 20 2020