Use Formik+Yup to create a multi-step React form part 1: build a simple form

4 min readJul 20, 2020

Last week I wrote an article about creating a multi-step form in React, after that, I actually found a better combination to do that thanks to an inspiring article that introduces a new way to do the same thing: use Formik and Yup instead of pure React!

That article by Nero explains it in a very easy and comprehensive way. However, I still want to write my own version because what I am writing is for a multi-step React form, also that helps clear my mind and organize my understanding of this topic.

Alright, long story short. Let’s start!

Why do we use Formik?

When creating a form, there are actually a lot of repetitive codes. For example, the codes to handle field changes, form submission and validation errors, etc. Of course, you can write them all in one file in your app directory, and import them when you need them. However, when you work on another project, and to create a form, you have to find this old file and copy and paste and do some configuration, that’s TOO MUCH HASSLE!!

The fact is, you don’t even have to write them in the beginning. Yep, Formik is the right tool! It gives you a lot of handy tools when you need the above features for your forms! You should check here to find out what they have to offer.

What’s more, Formik is JUST A REACT COMPONENT. You can pass props and state like you normally do(Make sure you check the very user-friendly document too to explore the APIs). And what’s more important, you can custom your own method and override them as long as you understand what happens under the hood.

How do we use Formik to build a simple form?

To begin with, install it with this command:

npm install formik --save

And then import it:

import { Formik } from "formik";

Pass props to <Formik />

Ok, now, we can use it as we want. First of all, remember this all the time, Formik is JUST A REACT COMPONENT. Therefore, we can use props and state as we usually do in a React component. Usually, we can just pass initialValues and validate props.

The intialValues is just the state that we usually have in a normal form, and onChange will modify it automatically. The validate prop equals to a function where it takes values object of the form and would return an error object after a series of validation on form fields. So, the Formik component will look like this:

const validate = values => {
    const errors = {};
    if (!values.firstName) {
      errors.firstName = "Required";
    }    if (!values.lastName) {
      errors.lastName = "Required";
    }    return errors;
  };<Formik
        initialValues={formData}
        validate={validate}
 >
    // put a form here
 </Formik>

<Formik > also comes with a lot of handy methods that you can use. And if you want to override it, you should pass it as a prop, for example, if you want to change the default handleSubmit method, you can define your method outside of the <Formik> component and then pass it inside as a prop like so:

<Formik
        initialValues={formData}
        onSubmit={myHandleSubmitFunction}
        validationSchema={SignupSchema}
      >
     //put a form here 
</Formik>

Wrap up a form with <Formik />

After you pass the props to <Formik> , all of the built-in methods of the <Formik> component are ready for its children component, which is <form>here, to use:

<Formik
        initialValues={formData}
        onSubmit={handleSubmit}
        validate={schema}
      >
   {({ handleSubmit, handleChange, handleBlur, values, errors, touched }) => (
     <form onSubmit={handleSubmit}>
       <input
         type="text"
         onChange={handleChange}
         onBlur={handleBlur}
         value={values.firstName}
         name="firstName"
       />
       {errors.firstName &&
         <div>
           {errors.firstName}
         </div>}
       <button type="submit">Submit</button>
     </form>
   )}
      </Formik>

As you can see, there are a bunch of codes between <Formik> and <Formik /> . We can see that it is actually an arrow function. The arguments are the props that the <form> need from <Formik> component. (Here it uses the object destructuring to unpack the values in the prop object and then explicitly assign it to variables with the same name. Feel free to do more research on destructuring assignment).

Right here you can see I pass handleSubmit, handleChange, handleBlur, values, errors, touched methods so that <form> can use within itself. There are actually a lot or props you can choose from. Check out here!

And this arrow function is going to return a <form> object! As you can see, the <form> can use all of those methods that we get from <Formik> as long as we assign it, like this: onSubmit={handleSubmit} .

Note

we can also use <Form > that is offered by Formik too. We can import it like so:

import { Formik, Form } from "formik";

Then we can replace <form> with <Form> , the good thing is it will use the handleSubmit and handleReset methods by default so we don’t have to set it up manually. Check out here for an official explanation.

End

Now a simple form is built! With Formik, once you import it, you just need to wrap a form with the <Formik> component and then your form can freely use whatever Formik has to offer!

Thanks for reading! In the next few articles, I will talk about how to validate with Yup , handle errors(display error, disable buttons when there are errors), and use Formik to create a multi-step form. Stay in touch!😀