React forms: Formik and Yup intro

Introduction

React forms are difficult. Organizing all events for different input fields around the React lifecycle can be complex. But there is Formik. One of the very good libraries that helps with this problem, and in the rest of this post, I will cover the basics of what Formik gives us. As a bonus, there will be a few details on another amazing library that is often used in combination with Formik, Yup.

Formik

If you worked with react forms before, you might remember how complex it was to incorporate all the needed functionality. Mess between value, default value, blur, and change handler, and then select elements. Then on top, you have to validate and bind all the values to the state. It was a mess. Formik makes this task easier by providing us with many needed components and functions out of the, but with enough flexibility to add custom stuff. All you need to do to start using it is install it with one simple command:

npm install -S formik

From this point, everything is quite straightforward. You import the Form component, give it the required props and everything inside is under the Formik. There are plenty…