A guide to React forms and events using Formik

If you think setting up React forms in the manner above is a bit stressful and worrisome, then I have good news for you. Formik helps to make powerful and lightweight forms in React. It gives you the ability to grab and manipulate values, set errors and warnings, customize inputs, and use many more features that make building forms easy.

Formik keeps track of your form’s state and then exposes it plus a few reusable methods and event handlers (handleChange​, handleBlur​, and handleSubmit​) to your form via props​. handleChange​ and handleBlur​ work exactly as expected — they use a name​ or id​ attribute to figure out which field to update.

The Formik component in conjunction with Yup can be used to write awesome form validations. Yup is used for object schema validation and that means it can be used as a validator when building React forms with Formik.

When it comes to the Formik API, there are three important APIs to consider and understand:

1. withFormik​ higher-order component
2. ​​Field​ component
3. ​​Form​ component

withFormik higher-order component

withFormik allows you to create higher-order React components. You can then pass in some props and form handlers in the component based on the supplied options. Let’s take a look at some of the available options that can be in withFormik.

• ​​handleSubmit​: as the name suggests, it helps with the form submission in Formik. It is automatically passed the form values and any other props wrapped in the component
• mapPropsToValues: is used to initialize the values of the form state. Formik transfers the results of mapPropsToValues​ into an updatable form state and makes these values available to the new component as props.values.
• validationSchema​: a function that returns a Yup Schema or an actual Yup schema itself. This helps with validation inside the form

Now, let’s check out some examples to make use of even more components.

The Field component in Formik

The Field component in Formik is used to automatically set up React forms with Formik. It’s able to get the value by using the name attribute, it uses the name attribute to match up the Formik state and it is always set to the input element. That can easily be changed by specifying a component prop.

// default input element set to an email type
<Field type="email" name="email" placeholder="Email" />

// In this case, the Field acts as a select element
<Field component="select" name="color" >
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</Field>

The <Form/> component

<Form/> is a helper component ​​that extends the native form​ element. ​​It automatically assigns the onSubmit​ event handler to props.handleSubmit​. ​​All we need to do is wrap our Field​ components inside a Form​ element, like the code below:

<Form>
  <Field type="email" name="email" placeholder="Email" />

  <Field component="select" name="color" >
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </Field>
</Form>

With those basics understood, let’s see how Formik can be used to build and validate a React form.

Like controlled components, a full-fledged form will be built. We’ll then go over the different parts of the form and how it works. The entire code/demo can be viewed below.

Notice the first lines of code are imports. We import React, render from react-dom, some components from Formik with named imports. Yup is also imported.

import React from 'react';
import { render } from 'react-dom';
import { withFormik, Form, Field } from 'formik'
import Yup from 'yup'

The next block of code is ​​our App​ component definition with a props​ param. The props param is set to an object that contains values that will be used in the app.

const {
  values,
  errors,
  touched,
  handleChange,
  isSubmitting
} = props;

All of the details from the form is stored in values, validation errors are stored in errors, touched is a boolean value that checks if an input field is in focus, handleChange helps to perform a certain function whenever there’s a change in an input field, and isSubmitting is also a boolean value that’s set to true whenever the submit has been clicked. The App function also returns a div that contains the JSX markup for the form.

On line 17, the <Form> component is used to encompass the whole code needed for the form. As mentioned above, it helps to prevent typing out <form onSubmit={props.handleSubmit}/>.

I’ll highlight the different Field components and input elements in the Form component and how they work with Formik.

Text Input

{touched.fullname && errors.fullname && <p>{errors.fullname}</p>}
<Field className="input" type="text" name="fullname" placeholder="Full Name" />

The Field component is always set to the input element. All that’s left is to define the name attribute so that Formik can automatically get the value.

In the line of code above, the Field component is simply used for validation purposes. It checks if the input element is in focus with touched.fullname and then checks if there are any errors with errors.fullname.

If there are errors, it then shows the custom message in the object schema validator. I’ll touch on the setup for validation later.

Select

{touched.editor && errors.editor && <p>{errors.editor}</p>}
<div className="control">
  <Field component="select" name="editor">
    <option value="atom">Atom</option>
    <option value="sublime">Sublime Text</option>
  </Field>
</div>

As mentioned above, the default state of a Field component is set to input but that can easily be changed by specifying a component prop, as seen above. The name attribute is set to editor and has two option elements with different values. The first line of code is also used for validation as explained above.

Radio

{touched.test && errors.test && <p>{errors.test}</p>}
<div className="control">
  <label class="radio">
    <input name="test" type="radio" value="yes" className="radio" onChange={handleChange}
    />
    Yes
  </label>
  <label className="radio">
    <input
    name="test" type="radio" value="no" className="radio" onChange={handleChange}
    />
    No
  </label>
</div>

For the radio element, we are not able to use the Field component but instead the old-fashioned way, with input and a type of radio. Both radio options are set to the same name attribute but each radio option has a different value.

Checkbox

<label className="checkbox">
  {touched.newsletter && errors.newsletter && <p>{errors.newsletter}</p>}
  <Field type="checkbox" name="newsletter" checked={values.newsletter} />
  Join our newsletter?
</label>

The checkbox element here is the Field component with a type of checkbox. The checked event is set to change the value of the newsletter value to either a truthy or falsy value.

Submit button

Another thing to note is the button element. Formik automatically detects that clicking on the button element at the end of the form signifies the user’s intent to submit all of the form details.

<button disabled={isSubmitting}>Submit</button>

isSubmitting is a submitting state. It’s either set to true or false. When it’s set to true, the button will be disabled while Formik makes a call to the handleSubmit handler.

The DisplayFormikState function is a stateless function that helps to show the raw data and error values in the form via the props.

const DisplayFormikState = props =>
  <div style={{ margin: '1rem 0', background: '#f6f8fa', padding: '.5rem' }}>
    <strong>Injected Formik props (the form's state)</strong>
    <div>
      <code>errors:</code> {JSON.stringify(props.errors, null, 2)}
    </div>
    <div>
      <code>values:</code> {JSON.stringify(props.values, null, 2)}
    </div>
    <div>
      <code>isSubmitting:</code> {JSON.stringify(props.isSubmitting, null, 2)}
    </div>
  </div>;

FormikApp is used to encompass the whole form in the withFormik higher-order component.

const FormikApp = withFormik({
  mapPropsToValues({ email, password, newsletter, editor, test }) {
    return {
      email: email || '',
      password: password || '',
      newsletter: newsletter || false,
      editor: editor || 'atom',
      test: test || ''
      }
  },
  validationSchema: Yup.object().shape({
    email: Yup.string().email('Email not valid').required('Email is required'),
    fullname: Yup.string().required('Full Name is required!'),
    password: Yup.string().min(9, 'Password must be 9 characters or longer').required('Password is required')
  }),
  handleSubmit(values, { resetForm, setErrors, setSubmitting }) {
    setTimeout(() => {
      if (values.email === '[email protected]') {
        setErrors({ email: 'That email is already taken' })
      } else {
        resetForm()
      }
      setSubmitting(false)
    }, 2000)
  }
})(App)

The mapsPropsToValues function helps to transform the outer props we defined in the App function earlier into form values. It returns all the values gotten from the form details. The next thing to note is the validationSchema.

The validationSchema is what helps with the form validation. It uses Yup, which is an object schema validator to achieve that.

As you can see above, the name of the value is set to Yup, and then you decide if the value should be a string, number, boolean, or a date. You can also ensure that the value is required by chaining required() and putting the error message inside the parentheses.

Yup also allows you to set the minimum length of a string with the min() API. It accepts two values, the number of characters, and the error message if the value is not up to that amount.

You can check out the Yup documentation for more API and how you can validate your forms better.

The handleSubmit function is the submission handler, it accepts values (which contains the form details), resetForm, which is used to reset all the form values, setErrors, which sets the error messages if there are errors, and setSubmitting is used to set to isSubmitting imperatively.

Our form is then wrapped in the withFormik HoC and FormikApp is rendered on the React App.

With all the code above, you can see how easy Formik makes building React apps.

Conclusion

In this tutorial, we learned how to build forms with React. React does not ship with a default way of handling forms, instead, you’d have to use the handleChange event to check for changes and at the same time sync with the state. I also explained the basics of Controlled Components in React.

We also used Formik, which is basically an HoC that helps with the building of forms. We went through the different APIs that ship with Formik and how to use them.

The demo and code for the form built with Controlled Components can be seen on CodeSandbox and that of Formik can be seen here, too.