React Formik Tutorial - 18 - Field Revisited

welcome back everyone over the next couple of videos I want to cover a few features in formic which would come in handy when you create forms that are more practical and more complex than our You Tube form in this video I want to revisit the field component we learned earlier in the series when I introduced the field component I mentioned two things first is that by default it renders an HTML input element second is that behind the scenes it hooks up the input element to farming that is it hooks up handle change handle blur and of course the value of the form field now let's discuss a few additional points about this field component the first point is that the field component will pass through any additional props that you specify you can see that at the moment we are passing in the ID attribute to all the field components if we go back to the browser and inspect the element the same has been passed through to the input element as well similarly if I were to specify a placeholder prop on the channel field YouTube channel name the same would get passed through to the input element and you'll be able to see the placeholder as well YouTube channel name so first point to make note of is that any additional props in the field component will be passed through the second point for our discussion revolves around the ability to render a different element other than the input element let's say we want to add a text area field to our YouTube form let me start by adding in the code as before first add it to the initial values object we want the user to enter some comment and the initial value again is an empty string next let's add the JSX so after the channel form control a div tag class name is equal to form control I'm going to add a label that says comments HTML 4 is going to be equal to comments and then we add our field component field ID is equal to comments name is equal to comments but as it stands this would render an input element and not a text area to instruct forming to render this as a text area we simply need to add the as prop passing in text area as is equal to text area so this is now going to render the field component as a text area element in AB dot CSS I will quickly add text area styling as well so if it's infant or it's a text area use these styles if you now go back to the browser we should have the comments field rendering as a text area now this as crop can accept as its value either input or text area or select or a custom react component as well its default value is input which is why we don't have to specify the prop when rendering an input element we will learn more about rendering select drop-down and custom react components later on in the series alternatively to this as prop you can also use component prop if I say this and go back to the browser the end result remains the same the internal implementation slightly differs though and one point to keep in mind is that the component prop was deprecated and then unduplicated so I would probably stick to using the ass prop but for now the second point to keep in mind is that the field component accepts an ass prop to decide what element to render the third and final point of discussion is around the render props pattern now this is a slightly more advanced pattern which will give you more fine-grained control over the rendering and behavior of your form field now I'm not going to explain in detail how to use each of the props that the render props object will provide but I will show you how to use this render props pattern to create a field similar to what we already have let's say we need to render another input element to collect the user's address we could do this the way we are rendering name or email or channel but we want to learn the render props way let's start with the initial values min to add a property called address and set it to an empty string next let's add the JSX dev tag from control class label is going to be address and HTML 4 is going to be addressed as well after the label we're going to have the field component this is going to have name is equal to address now this address field would work perfectly fine as it is but we definitely want the render props way with the render props pattern we use a function as children to the component so our field component will now have opening and closing tags next as children we pass in a function and this will be an arrow function the arrow function will return JSX which in our case is an input element for the user to enter their address so return an input element and let's add ID is the equal to address but as it stands this input element is not hooked into formic in any way this is where the props for this arrow function comes into picture props and let's lock the props to the console to see what we get render props props if I save this and we take a look at the browser expand the object you can see that we have three properties filled form and meta if we inspect further field contains the name value on change and on below everything for make requires to manage the state we then have the form object this is basically the formic constant that the use formic hook used to return it has all the properties and helper methods to modify your form in any way required in fact we have seen a few things before the errors object the values object the touched object and so on you can also see a few helper methods we have handle submit handle change handle blur and so on again for now I just want you to be aware of this and we can learn how to use them later on in the series the third prop provided is the meta prop this gives you information on whether the particular field has been visited or not if there is an error or not and of course the value this is what can be used to render your error messages out of the three props field and meta are more concerned at an individual field level let's see how to make use of them with our address field let's begin by restructuring the render props for the structuring we use curly braces the three props are filled form and meta to hook the input with formic we need to spread the field props so on the input element within curly braces spread the field props this will take care of the mean value handle change and handle blur next we can make use of the meta prop to render an error if there was one right now we don't have a validation rule but I will show you how to render the error anyway so I'm going to have a div tag enclosing the input element and our error message right after the input element I'm going to add a condition meta dot touched and meta dot ever only then render a div tag with the error message health's returned not now this is pretty much what the error message component also does all right let's save this file and head to the browser to test it out now address is missing the Styles because I did not specify input type is equal to text if I now go back to the browser you can see that we have the address form field as well now currently we don't have a use for this form prop but I just want you to know that it is present as part of the render props so this is the implementation of the field component with the rendered props pattern at the moment I know it seems like an overkill but when you want to use custom components in your form and you want them to be helped into forming this pattern will definitely come in handy again my intention is to get you familiar with some of the Handy features that you may require in the future I want you to know that these features do exist rather than you not knowing them and instead worrying how to go about achieving something complex with form egg so that is about the field component remember that all props on the field are passed down like the placeholder then you can use the as prop to render an element other than an input element and you can use the render props pattern for a more fine-grained control over the form field alright then thank you guys for watching don't forget subscribe let's see you guys in the next video

Channel: Codevolution

Views: 19,675

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

Id: TOPYgxjh9lk

Length: 12min 5sec (725 seconds)

Published: Wed May 20 2020