Formik Components

In order to reduce the repetition in our form, we make use of the formik.getFieldProps method which accepts the name attribute of the field and returns an object containing some properties of the field.

Even with this method in place, our code is not entirely free from repetitions. We still repeat the call to formik.getFieldProps for each field. We also write the code that displays an error message for each field if it has been visited and has errors.

Formik provides components that solve this problem. These components work with the React context API so they have access to any value in Formik’s state at all points in the component. This is the way the React context works. We create a context provider, then pass a value to the provider. This value can be accessed by every child component of this provider without passing it as props. The value can be of any data type.

Let’s look at the different components that Formik provides to make our code more readable individually.