Self-Contained Forms in React using Formik
React forms are redundant, non-declarative and repetitive. React Formik gives you a simpler declarative API for building self-contained forms in React.
In this lesson, we'll refactor a Vanilla React form to us Formik to show how simple forms can be. If you are interested in how the Vanilla React form was built, you can watch Build and Validate a Form in Vanilla React.
Instructor: [00:00] Believe it or not, this is so much boilerplate code, just for one input field. We have handleSubmit, handleUsernameBelow, handleUsernameChange, [inaudible] with errors objects, and all these templates, just to get one field in a form to work.
[00:22] Now, let's have a look at how Formik simplifies building the React forms. We can start with importing some component from formik. Start with formik itself, then the form component, then field component, and the error message component.
[00:47] Now, instead of returning null, we can return formik, and pass it an initial values prop. This is what replaces the state object. We have username, and then you can have an onSubmit function as well. Basically, what we need to do is just log out the values.
[01:26] Formik takes a render prop, which returns the actual form. Just like we had before, a label for username. Then a field for the username input, which is of type text. Name is username, ID is username as well.
[01:57] Then we have the error message, which we can style with the color red. The name, which points to the field name, is username. We want it to be rendered in a div component. Then we can also have the submit button, with a submit text. The type should also be submit.
[02:35] You can add validation using the validate prop, which takes a function that receives the values. You can have an errors object, just like we did in the previous example, but was in the state. Then check if the values.username does not exist.
[03:03] If it doesn't, we can say errors.username should be username is required. Then we can return the errors object. Just like we did in the previous example, click in the username input, and click outside if you're filling or a different filled, then when you type, the validation message disappears.
[03:28] Also, test if submitting is working by pulling up the console and submitting what we have here. You can see the object exists in the console. You can compare the code you have here, which is just about 34 lines, versus the code you had in the default line, which is 48 lines with all the boilerplate code.
[03:50] Notice how the Formik version does not have any of the handlers or state. Everything is self-contained in the Formik component.