How to implement the React-Formik form library on a simple form?

Image for post
Image for post
Build forms in React, without the tears.

In this article, we are going to look at how to implement the react-formik library to a simple form with validation. Formik is a small library that helps you deal with forms in react.

Why do we need to use Formik?

· Managing form data

· Form submission

· Form validation and displaying error messages

· Formik helps you deal with forms in a scalable, performant, and easy way

Let’s design our simple form first!!

Image for post
Image for post
User Registration Form

This is the form we are going to use in this article. First, you have to install the Formik library. Open the terminal in VS Code. You can install Formik with NPM or Yarn.

NPM

$ npm install formik –save

Yarn

$ yarn add formik

Note: Formik is compatible with React v15+ and works with ReactDOM and React Native.

After successfully installing the Formik library you have to import the useFormik from the Formik library as follows.

Image for post
Image for post
import formik library

Hook is basically a function. So, we need to call it in our component. This useFormik hook takes an object as its parameter. This hook will then returns an object which contains varieties of useful properties and methods that we can use with our form. Let’s call the returned object as formik. This formik object will help us with the following.

· Managing the form state

· Handling form submission

· Validation and error message.

Managing the form state

Image for post
Image for post
Managing the state

Our form has three fields. They’re Name, Address & E-Mail. Currently, we don’t keep track of the values of the form fields. In react, if the value changes we need a state variable for that. We need a state variable for Name, Address, and E-Mail. Collectively we can call this a form state. Form state is an object which keeps the value of different form fields. If we change the name it should be reflected back to the form state object.

Image for post
Image for post

I have created a UserReg functional component which has the form with three fields and a submit button. The first step is to pass the property called initialValues to the object we have created with useFormik hook as follows.

This intialValue property is an object. This object holds the initial value for all our form fields.

Note: Properties of the initialValues corresponds with the name attribute of those individual fields.

Then we need to add the onChange, value prop to those individual fields.

Image for post
Image for post

This ensures that form fields are tracked in react by Formik. Once you did this Formik will automatically track values for you. This name, address, and email corresponds to the name attribute of those individual fields. handleChange method is a formik’s helper to update the values object. We are accessing the individual values of the form with the help of value prop. To submit the values we need to specify the onSubmit handler on the form tag.

Image for post
Image for post

Formik gives us a handler to submit the form submission. Then we need to specify the onSubmit property method to the formik object.

Image for post
Image for post

This property automatically receives the form’s state as its argument. When the user press the submit button Formik is going to execute the onSubmit method automatically.

Image for post
Image for post

This object holds the data we input in the field. We are able to handle the form submission easily with the Formik.

Form Validation

Image for post
Image for post

We need to add the validate function which is similar to the onSubmit property to the formik object to validate the objects.

Image for post
Image for post

This function should return an object. So I’m going to create an object and return the same. As you can see above I have created an errors object and return it. Keys for this errors object should be similar to that of values object. These keys will correspond to the name attribute of the three form fields. The values of these keys should be a string indicating what the error message should be for that particular field. Now we have set up everything. Let’s do some code refactoring before moves on.

Image for post
Image for post
Image for post
Image for post

Now our code looks much better. Under each input element let’s add a div tag that displays the error message and we want to display the error message only if it exists. To execute this we need a conditional rendering.

Image for post
Image for post

If the error exists we need to show the error otherwise don’t show anything. Do the same thing for the other two fields.

Image for post
Image for post

The problem here is that even if you don’t access the other fields it will throw the error message in the early stage. We don’t like that. How can we overcome this? If you want to keep track of the form field that has visited, we have to add onBlur prop on the form input element. To this method, we need to add formik.handleBlur. handleBlur is a helper method that we get from formik object.

Add this to the other two fields too.

Image for post
Image for post

We have done formik requires us to do to keep track of the visited fields but where does formik store that information? It stores in an object called touched.

Image for post
Image for post

Now the condition will check that form has visited and the error exists we should throw the error otherwise doesn’t show anything.

Image for post
Image for post

If you have stuck in somewhere please refer to my source code which is available in:

Hope everyone enjoys this article. Thank you, everyone.

Written by

I’m a tech savvy person who loves to keep myself updated to the current trends of the technology world.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store