React Formik Tutorial - 22 - FieldArray component

welcome back everyone in this video we are going to take a look at another component that the formic library provides which is the field area component it is a component that helps with a common scenario namely dynamic form controls generally though you can say that field era component is meant to help you with common array or list manipulations let's understand how this component works with an example in the last video we learned how to manage the state of a form field as an array in our initial values object we added a property called phone numbers and assigned an array with two empty strings in the JSX we had the field component for each of those indexes so for numbers of 0 and for numbers of 1 and this is fine to collect two phone numbers from the user typically though collecting multiple phone numbers or multiple addresses is handled through dynamic form controls what I mean by that is to begin with we only render one field for the user to enter their phone number we then give them the option to add or provide more numbers of the wish to the list of phone numbers would be managed as an array in our form State so let's see how to implement a dynamic form control to collect the users phone numbers using the field added component let's start with the first step at the top import field array from formic second step we need to add a new property to our initial values object I'm going to call this pH numbers for numbers in short the value is going to be an array with one empty string remember we start off by asking for just one phone number so only one value to begin with for step three we need to add the JSX and this is where there is slight complexity nothing to worry about though as we will be breaking this down into further steps to understand what exactly is happening so step three point one let's add the dip tag and the label so after the last form filled dip tag class name is equal deform control and then we are going to have a label within that list of phone numbers next is step three point two if you quickly take a look at the previous form fields after the label we have the field component this time though since we are working with a list of form fields that are dynamic we will use the field array component so after the label field array to this component we have to specify the mean prop just like the field component the name is going to be equal to phone numbers or pH numbers now this is the property we specified in the initial values object all right step three point three is where the actual heart of this video is present to be in control of this dynamic form control we need to use the render props pattern for this field array component now this is similar to the render props pattern that the field component also provides which we have a look at for the address form field in one of the earlier videos if the term render props is confusing to you just think of it as function as children so in between the opening and closing tags of the field component we have a function this function will automatically get some props and then using those props we will return some Jess this is what we will do for our field era component as well function as children so in between the opening and closing tags of the field Eric component curly braces and then add an arrow function this function will automatically get some props that we can use in our JSX that's called those props as filled array props now before we proceed with writing the JSX I want us to inspect and understand the structure of this field Ally props object so I'm going to add a log statement console dot log field Harry props field Ari props and then return a simple div tag for now so return a div tag that says field perry we can now save the file and head to the browser to understand this field away props in the console if I expand the object you can see that we have a few properties and a lot of functions or methods there are methods like push pop remove unshipped which seem like common area manipulation operations we also have the form object which is basically everything we need to manage the entire form now if there is a lot in here so let me nano down our focus points for our example we are interested in just two functions and one property the two functions are push and remove which we will use to add a new phone number and remove we will use to remove an existing phone number pretty straightforward the form property on the other hand we need to go a few levels deep if I expand the form object as well we can see the values property and here is where we would find the values for our pH numbers fields we need this particular property to be able to render our JSX let's go back to vs code and do that now in fact let me hop between the browser Andrea's code to write the next three lines of code at the moment we have filled array props if you go back to the browser I mentioned that we need push and remove functions and the form property so let's do structure that first so we're going to extract push remove and form from the field array props next let's dive deeper into the form object if I expand the form object we need the values object so back in Mia's code we extract values from form and if you go back to the values object we need the pH numbers probability so values dot pH numbers which means with the structure four numbers from the values object all right we now have everything we need to write the JSX currently we are returning this dummy div tag let's change that what we have to do is iterate through this phone numbers array and render a field component for each value in that array so div tag and within the div tag curly braces and within the curly braces phone numbers dot map and the map function takes in an arrow function as its argument this function receives each item in the array along with its index and has to return chair sex let's call each item as phone number called index as index and it needs to return JSX for our JSX we start off with a dip tag and specified key is equal to index within the div tag we use the field component the name probe though we specify phone numbers along with the index the pH numbers and then we access four numbers at that particular index now we have the field component but what we also need are buttons for the user to add or remove the fields dynamically so after the field component we add two buttons button the text is going to be the minus sign type is equal to button and similarly the second button the text is going to be the plus sign so the first button to remove an entry and the second button to add a new entry the click handlers for these buttons we are going to make use of remove and push functions so on click and arrow function and we need to remove add the particular index and on the Add button on click is going to be equal to an arrow function where we push a new empty value into the array and that should be it let's save the file and test it out on page load if I scroll to the bottom you can see that we have the form field to accept a phone number I'm not going to worry about the styling for this let's just understand the functionality and the styling is up to you so we have one form field and a plus and a minus button let's enter some values across the different fields and click on submit if you take a look at the submitted data you can see that we have pH numbers which is an array with one value this the value we have entered now the user can dynamically add a new field to enter additional phone numbers so I clicked on the plus button it renders a new input with an MD value I can enter another number four five six click on submit and we see the second value as well pH numbers is an array with two values the user decides to remove that number they can click on the minus button and the field is removed submit again inspect the data pH numbers is just one value this is how you can have dynamic form fields with the field array component one minor improvement we can do is the prevention of deleting all the phone number fields if you take a look I can click on the delete button even if there is just one form field you can solve this by adding a simple condition so for the remove button only if the index is greater than zero then render it if you now take a look at the browser you can see that if there is only one form field the user is prevented from deleting it if I however add a second one the user can remove that second field now I know that was a lot to process so let's go over the steps one more time back in the skirt first step we imported the field Eric component from for make second step we add a new initial values property called phone numbers or pH numbers whose value is an array with one empty string third step we proceed with the JSX we add field area component with name equal to pH numbers with the news the render props pattern with our field array component this gives us access to properties and methods that will help us with array or list manipulations for our example we extract fish and remove functions and the form property from the form property we extract the values object from which we then extract the phone numbers we use the phone numbers or pH numbers array to then iterate with the map method and return the j6 that gets rendered on the screen we add the field component where the name is equal to four numbers but this time it is dynamically indexed we then add buttons to remove or add a new phone number when you add a new field we call the push method pushing an empty value into the phone numbers array so the map method will now render another field component with an empty string if you push more elements the map method will render more field components in effect we are basically rendering an array of field components using the field array component when you click on the minus button we call the remove method passing in the index this basically removes the value at that particular index in the phone numbers array and the field a daily vendors it will render with the deleted value removed from the JSX that is pretty much the gist of the field array component again if this is slightly difficult to understand watch it a couple of times or revisit this after you've watched the entire series once you have the overall picture of our mech pre watching videos will make much more sense and help you understand in lesser amount of time anyway thank you guys for watching don't forget subscribe I'll see you guys in the next video

Channel: Codevolution

Views: 22,418

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

Id: DYcqatriSNE

Length: 15min 17sec (917 seconds)

Published: Mon Jun 01 2020