Why is Formik so cute?
Everyone who has decided to study and develop with React (and knows how to do this), agrees that React is the best lib to solve the problems it proposes to solve. But throughout the day to day of the development new necessities arise that made the use of the Redux almost indispensable when using React.
In this marriage, new technologies and complementary libs, such as “react-redux”, or other libs of other cases of love, as “react-thunk”, “react-router” and a lot of complements to our dear React appeared. And one of these features was Redux-Form, which at first showed all its power and came to do magic to solve many problems in applications that used forms, but in this journey of hero, Redux-Form was leaving a trail of crying and tears.
Personally, I think it’s a complete madness to fire Redux at every user action on a form.
Formik was able to solve many of the problems I encountered with Redux-Form, especially the difficulty of doing something simple and, more importantly, it solved my hassle of getting access to the Redux store for everything.
In order to understand better the operation, and to do some tests, I created a repository with some examples, but throughout this text I will show some uses and comment what I think of the resources.
You have two ways to use Formik, either as HOC or as React Component. I prefer the second, and that’s how I’ve developed most of the examples. Saying something is a React component, it means that you will work with the idea of using <Formik />.
See the code below:
In this code, we have some important elements.
The first one is the “initialValues”, which will initialise the value you will use in your “values”. This is important so that React understands that you are not working with uncontrolled elements.
The second field, “validate”, is a really good thing and it’s up to you to create the validation rules of your form, applying all the rules you need and doing the treatments you need. More ahead I will comment on a lib that can help you in your validations.
The third is the “onSubmit”, which serves exactly what you expect on a form. In it you can make the necessary treatments or directions.
The fourth is the “render” method, where you will build the view of your form. There you will make use of the handlers, present the errors and build the layout of your form.
Incredible is not it? There are other functions and methods that you can explore to understand a little better.
But, one question that was raised when I needed to look at an actual application is: How do I make a form that is can have N children where the data is controlled in the parent form?
This question made me explore and try to understand Formik further. There are several ways and, to what I found most interesting, was using a feature of React 16.3, the Context.
Let’s take a simple example of this to understand well! Creating a Context:
After this step, we will create a Formik, using the structure I mentioned above, and in its rendering layer, which can also be called as a “children”, we will create the Provider of our Context, passing the necessary information.
Within our Context we build our form, building your fields according to the blocks of our form.
With this, we control the data of ALL our form with the values managed by Formik, as well as all the validations that we need to apply and treatments at the time of submitting the form.
Access to data within an element of the form can be accessed through the Context.
That way, you can build a form with multiple small forms, controlling the data and validations in your parent component, which allows for greater control of the data and easier to develop forms, and without crying.