How to implement the React-Formik form library on a simple form?
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!!
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 install formik –save
$ 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.
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
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.
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.
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.
Formik gives us a handler to submit the form submission. Then we need to specify the onSubmit property method to the formik object.
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.
This object holds the data we input in the field. We are able to handle the form submission easily with the Formik.
We need to add the validate function which is similar to the onSubmit property to the formik object to validate the objects.
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.
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.
If the error exists we need to show the error otherwise don’t show anything. Do the same thing for the other two fields.
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.
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.
Now the condition will check that form has visited and the error exists we should throw the error otherwise doesn’t show anything.
If you have stuck in somewhere please refer to my source code which is available in:
This project was bootstrapped with Create React App. In the project directory, you can run: Runs the app in the…
Hope everyone enjoys this article. Thank you, everyone.