How To Easily Handle Forms In React.js Using Formik

When I started working with react I was really excited as development using react felt very natural and not bloated at all. One can pick and choose from a number of libraries for doing things like state management and routing.

All was going well until it was required of me to design a couple of forms in react. Now I have to say that handling forms in react in manageable manner with validation proved quite a challenge for me since there is no recommended way of handling forms and validation.

After trying several approaches and different libraries I stumbled upon Formik. I have found Formik to be the most complete and elaborate solution for handling froms of any complexity.

Validation is really up to you, You are free to write validation for your forms yourself or if you are lazy like me you can use an existing library like Yup. Yup is library for object schema validation.

Here is a simple form that makes use of Formik along with Yup for validation of our form. Full code can be accessed here

All you have to do is wrap your form component within `withFormik` HOC and you will get access a lot of useful functions and data for accessing and manipulating the form. The most important props that your form component will receive are handleSubmit ( This should be set as form submit handler ). values object contains all the form input values. errors object contains all the errors.

import React from "react";
import { withFormik } from "formik";
const Yup = require("yup");

class DemoForm extends React.Component {
  render() {
    let {
      handleSubmit,
      handleChange,
      isSubmitting,
      values,
      errors
    } = this.props;
    return (
      
<form className="container" onSubmit={handleSubmit}>
        
<div className="form-group">
          <input name="name" className="form-control" placeholder="Name" value={values.name} onChange={handleChange} />
          {errors.name && 
<div className="text-danger">{errors.name}</div>

}
        </div>

        
<div className="form-group">
          <input name="email" className="form-control" placeholder="Email" value={values.email} onChange={handleChange} />
          {errors.email && 
<div className="text-danger">{errors.email}</div>

}
        </div>

        
<div className="text-right">
          <button type="submit" className="btn btn-primary">
            {isSubmitting ? "Submitting..." : "Submit"}
          </button>
        </div>

      </form>

    );
  }
}

const EnhansedDemoForm = withFormik({
  mapPropsToValues: props => props.values,
  validationSchema: Yup.object().shape({
    name: Yup.string().required("Name is required"),
    email: Yup.string()
      .email("Please enter valid email")
      .required("Email is required")
  }),
  handleSubmit: (values, { setSubmitting, props }) => {
    props.handleSubmit(values, setSubmitting);
  },
  displayName: "BaseRateForm"
})(DemoForm);

export default EnhansedDemoForm;

withFormik takes an object as parameter, You can define your validation rules in the object as in the example above

const EnhansedDemoForm = withFormik({
  mapPropsToValues: props => props.values,
  validationSchema: Yup.object().shape({
    name: Yup.string().required("Name is required"),
    email: Yup.string()
      .email("Please enter valid email")
      .required("Email is required")
  }),
  handleSubmit: (values, { setSubmitting, props }) => {
    props.handleSubmit(values, setSubmitting);
  },
  displayName: "BaseRateForm"
})(DemoForm);

And finally you call your form component like this

<DemoForm values={{ name: "Jhon Doe", email: "[email protected]" }} handleSubmit={this.handleDemoFormSubmit} />

So that’s about it for today, I will be writing another post for handling complex forms using formik and yup which will include file inputs, dates and other types of input fields.
I would like to hear your thoughts on this.