Formik onsubmit error

We all know that making and maintaining forms in React can be a bit of a pain, thankfully Formik is here to save us.

In this post we will go over how to use Formik in React, why you should use it, and when you should and shouldn’t use it.

I feel that before we get into how to use Formik, we first need to talk about why it is important, rather than just putting your form into a useState or useReducer react hook.

For those of you who just want to see how to use Formik in React, click here to skip to that part.

As with all my posts, I aim to write this post without too much technical jargon so that all experience levels can follow along and benefit from it.

Why use Formik?

Well let’s start by looking at the alternatives (although we won’t be considering other libraries here).

Option 1: Create a form using useState

Using the useState react hook is probably the fastest way you can implement a basic form in react. You can either put everything into a single state using an object or you can create multiple states each with their own form field.

If you were to go down this route, adding your form fields into a single state with the use of an object would probably best to avoid polluting your codebase with new useState hooks.

To do this you could create a helper method to manage adding, updating and removing the fields.

Whilst this might be fast to implement, it will become fairly un-maintainable pretty quickly and you will have to manually add all the onChange handlers to each and every field not to mention side effects, error handling and so on.

Option 2: Create a form using useReducer

Using the useReducer react hook is pretty much identical to the useState hook except that you can manage the form state a little better with more control rather than having to create a helper to update the state.

Option 3: Create your own form component/library

Finally this last option might be useful if you have a really bespoke need that something like Formik cannot solve for you, but for the most part this will just be re-inventing the wheel and you will spend a lot more time building out your form components/library, when you could instead use that time to read over the Formik docs.

Option 4: Creating your form using your redux store

This is probably the worst option of them all and there are very few occasions when this will ever be necessary.

It is a bad choice because when you use redux with a store as your single source of truth, the last thing you want to do is pollute it with single use form fields, and properties that either may never get used, or will only ever be used once and never need to be persisted across your application.

In this situation, once again having a local form state (like Formik) would work in your favour, and after the form gets submitted, you can then fire some actions with the resulting data so you only save what you need.

For the most part, these four options are not ideal and when you compare them with a plug and play library like Formik. You can start to see why you will want to go with Formik 99% of the time.

With that being said there are occasions when you might want to use other options which we will go over a bit later on.

How to use Formik in React?

So how do you use Formik in React?

It is pretty straightforward to get started with.

I won’t go over everything in Formik but if you want to have a read over the whole API then check out the official Formik docs here.

Step 1. Install

If you are using yarn, start by installing it into your project with:

And if you are using NPM:

npm install Formik --save

Once we have that installed we are going to create a basic component that uses Formik with a few form fields to initialise the form and tell Formik what we need:

import React from "react"
import { Formik } from "formik"

function buyApples(applesAmount) {
  alert(`You have purchased ${applesAmount} apples`)
}

export default function ExampleFormikForm() {
  return (
    <Formik
      initialValues={{
        applesAmount: 0,
      }}
      onSubmit={values => {
        buyApples(values.applesAmount)
      }}
    >
      {({ handleChange, handleBlur, values, handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <label htmlFor="applesAmount">
            <span>Amount of apples:</span>
            <input
              name="applesAmount"
              type="number"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.applesAmount}
              required
            />
          </label>
          <button type="submit">Buy apples</button>
        </form>
      )}
    </Formik>
  )
}

As you can see we have our component which contains our Formik form which has an input where you can enter the number of apples you want to buy.

Aside from that we have a submit button as well as a function buyApples which gets called when the form is submitted successfully.

From Formik we are making use of handleChange, handleBlur, values, and handleSubmit which are all fairly self explanitory.

When a user enters a number and then submits, it triggers our buy apples function and displays an alert.

Form Validation:

Now we have our basic form, we need some simple validation on the data we send. To do this we are going to use a library called yup.

Install Yup by running yarn add yup or npm install yup --save just like we did with Formik.

Now lets add our basic validation:

import * as yup from "yup"

const appleFormValidation = yup.object().shape({
  applesAmount: yup.number().required().positive().integer(),
})

As you can see here we are using yup to define our form validation by saying that our applesAmount must be a positive whole number that is required.

Let’s look at how we can now add this into our form:

import React from "react"
import { Formik } from "formik"
import * as yup from "yup"

function buyApples(applesAmount) {
  alert(`You have purchased ${applesAmount} apples`)
}

const appleFormValidation = yup.object().shape({
  applesAmount: yup.number().required().positive().integer(),
})

export default function ExampleFormikForm() {
  return (
    <Formik
      initialValues={{
        applesAmount: 0,
      }}
      validationSchema={appleFormValidation}
      onSubmit={values => {
        buyApples(values.applesAmount)
      }}
    >
      {({ handleChange, handleBlur, values, handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <label htmlFor="applesAmount">
            <span>Amount of apples:</span>
            <input
              name="applesAmount"
              type="number"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.applesAmount}
              required
            />
          </label>
          <button type="submit">Buy apples</button>
        </form>
      )}
    </Formik>
  )
}

Here we are only adding in one prop into Formik which is validationSchema={appleFormValidation} that applies our validation to the form.

If we now try to enter a string or a negative number our buyApples function will never be called and we will never see the alert.

This means our validation is working!

And there we have our basic form with validation!

As you can see it is really easy to set up and to create forms with.

The next thing we need to look into is handling errors so it doesnt just scilently fail like in the above.

How to handle errors with Formik in react:

Handling errors in Formik is nice and easy, Formik provides an easy to use prop called errors.

All we need to do is check whether an error exists, and if it does then display it to the user.

To do this we first need to get the following properties from our Formik props: errors, touched

And then, we need to add in the following code to our form (just above our input label):

{
  errors.applesAmount && touched.applesAmount && (
    <p style={{ color: "red" }}> {errors.applesAmount} </p>
  )
}

Here is this our error handling code integrated with our Formik form:

import React from "react"
import { Formik } from "formik"
import * as yup from "yup"

function buyApples(applesAmount) {
  alert(`You have purchased ${applesAmount} apples`)
}

const appleFormValidation = yup.object().shape({
  applesAmount: yup.number().required().positive().integer(),
})

export default function ExampleFormikForm() {
  return (
    <Formik
      initialValues={{
        applesAmount: 0,
      }}
      validationSchema={appleFormValidation}
      onSubmit={values => {
        buyApples(values.applesAmount)
      }}
    >
      {({
        handleChange,
        handleBlur,
        values,
        handleSubmit,
        errors,
        touched,
      }) => (
        <form onSubmit={handleSubmit}>
          {errors.applesAmount && touched.applesAmount && (
            <p style={{ color: "red" }}> {errors.applesAmount} </p>
          )}
          <label htmlFor="applesAmount">
            <span>Amount of apples:</span>
            <input
              name="applesAmount"
              type="number"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.applesAmount}
            />
          </label>
          <button type="submit">Buy apples</button>
        </form>
      )}
    </Formik>
  )
}

As you can see that only took a few seconds to add in. But we can do this better by making our own error handling component in combination with the useFormikContext hook (don’t worry if you are not familiar with hooks in Formik because we will go into them a little later on).

If we do this we can create a reusable component that we can plug and play in any Formik form.

Here is a basic example of how you could create and use this component:

import React from "react"
import { useFormikContext } from "formik"

export default function HandleError({ name }) {
  const { errors, touched } = useFormikContext()

  if (errors?.[name] && touched?.[name]) {
    return <p style={{ color: "red" }}> {errors[name]} </p>
  }

  return null
}

And in our form:

import React from "react"
import { Formik } from "formik"
import * as yup from "yup"
import HandleError from "./HandleError"

function buyApples(applesAmount) {
  alert(`You have purchased ${applesAmount} apples`)
}

const appleFormValidation = yup.object().shape({
  applesAmount: yup.number().required().positive().integer(),
})

export default function ExampleFormikForm() {
  return (
    <Formik
      initialValues={{
        applesAmount: 0,
      }}
      validationSchema={appleFormValidation}
      onSubmit={values => {
        buyApples(values.applesAmount)
      }}
    >
      {({
        handleChange,
        handleBlur,
        values,
        handleSubmit,
        errors,
        touched,
      }) => (
        <form onSubmit={handleSubmit}>
          <HandleError name="applesAmount" />
          <label htmlFor="applesAmount">
            <span>Amount of apples:</span>
            <input
              name="applesAmount"
              type="number"
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.applesAmount}
            />
          </label>
          <button type="submit">Buy apples</button>
        </form>
      )}
    </Formik>
  )
}

This will work in the same way as before, but now we do not need to pass down any props except from the name of the input we are displaying an error for.

How to use Formik hooks in react:

Let’s now take a look at using hooks in Formik to make slightly more advanced forms and ever create your own form component.

useField:

Let’s start by creating a custom input component, that can include the label and error handling, rather than just using a html input.

import { useField } from "formik"
import HandleError from "./HandleError"

export default function CustomFormInputExample({ name, label, ...props }) {
  const [field] = useField({ name, ...props })
  return (
    <>
      <HandleError name={name} />
      <label htmlFor={name}>
        <span>{label}</span>
        <input {...field} {...props} />
      </label>
    </>
  )
}

Now all we have to do is to plug this into our Formik form:

import React from "react"
import { Formik } from "formik"
import * as yup from "yup"
import CustomFormInputExample from "./CustomFormInputExample"

export default function ExampleFormikForm() {
  return (
    <Formik
      initialValues={{
        applesAmount: 0,
      }}
      validationSchema={appleFormValidation}
      onSubmit={values => {
        buyApples(values.applesAmount)
      }}
    >
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <CustomFormInputExample
            name="applesAmount"
            label="Amount of apples:"
          />
          <button type="submit">Buy apples</button>
        </form>
      )}
    </Formik>
  )
}

Now as you can see, we have our form with our input components and everything should be working as it was.

But what if we want to have a slightly more complex input?

We need to create our own Formik form component using hooks.

For this, let’s say we want one of our inputs to add the input text into an array when the user clicks a button next to the input.

Let’s take a look at how we can go about doing that:

import { useField } from "formik"
import React, { useState } from "react"
import styles from "./MultipleEntryInputExample.module.css"

export default function MultipleEntryInputExample({ label, ...props }) {
  const [nextValue, setNextValue] = useState({ name: "", value: "" }) // this will control the internals of this component
  const [{ value: fieldValue }, , { setValue }] = useField(props) // this is where we store all our entries
  return (
    <div className={styles.container}>
      <h3>{label}</h3>
      <div className={styles.multiInputs}>
        <input
          label="Name"
          className={styles.input}
          name={`multi-name-${props.name}`}
          onChange={e => setNextValue(s => ({ ...s, name: e.target.value }))}
          value={nextValue.name}
        />
        <input
          label="Value"
          className={styles.input}
          name={`multi-value-${props.name}`}
          onChange={e => setNextValue(s => ({ ...s, value: e.target.value }))}
          value={nextValue.value}
        />
        <button
          className={styles.button}
          onClick={() => {
            if (!nextValue.name && !nextValue.value) {
              return
            }

            const next = {
              name: nextValue?.name || nextValue.value,
              value: nextValue?.value || nextValue.name,
            }

            setValue([...fieldValue, next]) // add new entry to exsiting array
            setNextValue({ name: "", value: "" }) // after adding to the array we reset the internal state
          }}
        >
          <span>+</span>
        </button>
      </div>
      <ul className={styles.list}>
        {fieldValue.map(({ name, value }) => (
          <li className={styles.multiInputs} key={value}>
            <input value={name} className={styles.inputAdded} disabled />
            <input value={value} className={styles.inputAdded} disabled />
            <button
              className={styles.button}
              onClick={() => {
                setValue(fieldValue?.filter(entry => entry.value !== value))
              }}
            >
              <span className={styles.minus}>-</span>
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

As you can see, we have now made use of one of a Formik hook called useField to get and set the array in the Formik form.

The useField hook will take the name we give it that will relate to a form property, and then return us the value of the field and the setValue function to update the value in the form.

We also have a useState hook in our component to keep track of the name and value of the new entry that the user is typing into the input field.

When the user clicks on the button, we add the new entry to the form, and then clear the input state.

So the state here is controlling the input element and the form is controlling the array of data that is updated from our input.

This hook will probably be the one you use most often, but there is another hook that you may end up making use of called useFormikContext.

useFormikContext:

The useFormikContext hook gives you access to the form state/props that is passed into the children of the Formik component.

Just like how we used this earlier when we created our error handling component.

When to use Formik?

The last topic that we should cover here is: when to use Formik in React?

The answer to this will be largely circumstantial and personal to each use case and each developer.

With that being said, the short answer would be: 99% — 100% of the time. So if you are in doubt, go ahead and use Formik.

Given that it will be highly dependent on the project, and the form you are using and assuming that the alternatives are like we stated before (useState, useReducer, redux, writing your own version) I will generalise and say that for the most part, it is safe to assume that you should just use Formik.

There might be a few cases like if you have a very simple form with only one input and your project is not already using Formik then it might not be worth adding in Formik if this is the only place you would need to use it.

So to summarise when to use Formik in react, it is safe to assume that most of the time, if not always (when compared with the alternatives above), you should just go ahead and use it.

Summarising how to use Formik in React.

Formik is an amazing tool that saves a lot of time, effort and hassle when building forms in React.

Not to mention, it handles all the state, and getting, and setting of that state so it reduces the amount of code you have to write and maintain considerably.

It has built in validation that can be supplemented with the Yup library which makes life even easier.

Formik hooks means it is simple and easy to write custom form components and write forms with higher complexity as well.

Will

Sep 1, 2018

Building forms has always been one of React’s weaknesses. The unidirectional data flow paradigm in React doesn’t mesh with the ephemeral-ness of HTML forms. To get around this, we’d need to leverage React’s local state and update that state with the value of the form whenever an input was changed. This made maintaining forms difficult, tedious, and unscalable.

Enter Formik: https://github.com/jaredpalmer/formik

We’ll use Formik to help cover business cases and how it can make building dynamic forms that are validated all on their own incredibly simple and easy. For this post, I have a git repo that will be split in multiple branches to cover each case for brevity and conciseness. You can clone it here.

Case #1: Initial form

Let’s write a basic form with Formik. No styles, just a multitude of different fields and a submit button. We can log out all the values we have. Let’s do that:

import React from "react";
import { Formik } from "formik";

const initialValues = {
    firstName: "",
    pet: "",
};

const App: React.SFC = () => (
    <>
        <h1>Working with Formik</h1>
        <Formik initialValues={initialValues}
            onSubmit={(values) => console.log(values)}
            render={({ handleSubmit, handleChange }) => (
                <form onSubmit={handleSubmit}>
                    <label htmlFor="firstName">
                        <div>First Name</div>
                        <input type="text" name="firstName"/>
                    </label>
                    <label htmlFor="pet">
                        <div>Pet</div>
                        <select name="pet" onChange={handleChange}>
                            <option>Dog</option>
                            <option>Cat</option>
                            <option>Other</option>
                        </select>
                    </label>
                    <button type="submit">Submit</button>
                </form>
            )}>
        </Formik>
    </>
);

export default App;

Here we have a really basic HTML form with helpers provided to us by Formik. However it’s pretty tedious to have to constantly add the name and onChange props to all our fields. Let’s make it so that we don’t need to do that, leveraging Formik’s Field component. It automatically wires up those props for you, taking in only the name as a prop.

import React from "react";
import { Formik, Field } from "formik";

const initialValues = {
    firstName: "",
    pet: "",
};

const App: React.SFC = () => (
    <>
        <h1>Working with Formik</h1>
        <Formik initialValues={initialValues}
            onSubmit={(values) => console.log(values)}
            render={({ handleSubmit }) => (
                <form onSubmit={handleSubmit}>
                    <label htmlFor="firstName">
                        <div>First Name</div>
                        <Field type="text" name="firstName"/>
                    </label>
                    <label htmlFor="pet">
                        <div>Pet</div>
                        <Field name="pet" component="select">
                            <option value="Dog">Dog</option>
                            <option value="Cat">Cat</option>
                            <option value="Other">Other</option>
                        </Field>
                    </label>
                    <button type="submit">Submit</button>
                </form>
            )}>
        </Formik>
    </>
);

export default App;

Aside: Here, we can use the <Form/> helper to replace our <form onSubmit={handleSubmit}/> tag, but for the sake of simplicity we’ll leave the code as is.

Note: The git repo will have the most up-to-date code in the app.tsx file, but each branch will contain files for code examples in this post to make it easier to reference.

Case #2: Form validation

Now that we have our form, let’s try to add some validation to it. Luckily for us, Formik provides a hook for that. Let’s check out the case/form-validation branch and continue on from there.

Let’s add some validation to our form and make entering your first name required.

<Formik initialValues={initialValues}
            onSubmit={(values) => console.log(values)}
            validate={(values) => {
                const errors = {
                    firstName: null,
                };
                if (!values.firstName) {
                    errors.firstName = "Required";
                }
                return errors;
            }}
            // render the rest of the component...

We can add validation on a per-field basis, mapped to the name of the input. The validate prop via Formik will fire this function every time the form is submitted. If there are errors, then it will return an errors object. If there are no fields inside of the errors object, then the form will be submitted.

Suppose we want to type our form values? With TypeScript we can create an interface for our form values to take advantage of static types!

interface FormValues {
    firstName: string;
    pet: string;
}

We’ll also import the FormikErrors type from the Formik package and type the rest of our component:

import React from "react";
import { Formik, Field, FormikErrors } from "formik";

export interface FormValues {
    firstName: string;
    pet: string;
}

const initialValues: FormValues = {
    firstName: "",
    pet: "",
};

const App: React.SFC = () => (
    <>
        <h1>Working with Formik</h1>
        <Formik initialValues={initialValues}
            onSubmit={(values: FormValues) => console.log(values)}
            validate={(values: FormValues) => {
                const errors: FormikErrors<FormValues> = {};
                if (!values.firstName) {
                    errors.firstName = "Required";
                }
                return errors;
            }}
            // render the form...

Presto! Now we have static types that make it easy for other developers to see what the form data will return.

However, suppose you have a lot of fields? It’d be tedious to write a custom validation function for every field. Let’s use Yup for our form validation.

Note: at this point in time, the code will be saved in another file called ValidatedForm.tsx and we’ll update our app.tsx file.

import { string, object } from "yup";

const App: React.SFC = () => (
    <>
        <h1>Working with Formik</h1>
        <Formik initialValues={initialValues}
            onSubmit={(values: FormValues) => console.log(values)}
            validationSchema={object().shape({
                firstName: string().required(),
            })}
            // render the form...

Here we got rid of our custom validate function, and used a custom schema via Yup. What if we want to return a specific error message? We can add a string as a param for all of yup’s validation:

firstName: string().required("Entering your first name is required.")

This string will be returned via Formik’s errors object if the schema fails. Let’s add some markup to display the error to the user:

// Formik component...
render={({ handleSubmit, errors, touched }) => (
    <form onSubmit={handleSubmit}>
        <label htmlFor="firstName">
            <div>First Name</div>
            <Field type="text" name="firstName"/>
            {
                touched.firstName && errors.firstName
                ? <div>{errors.firstName}</div>
                : null
            }
        </label>
        // the rest of the form...

As you can see, Formik gives us a lot of tools to work with. Run the application and try to submit an empty firstName field. We’ll see an error message pop up just underneath the field, and the form will not be submitted.

In summary, using Yup with Formik provides an easy experience to creating forms and validating them. This takes out most of the legwork when creating forms in React, allowing developers to focus on building real forms, not fighting form validation or form creation.

Next, we’ll create custom styled fields and spice up our form using styled-components! Check out the case/styled-fields branch.

Case #3: Custom styled fields

The idea behind having custom fields is that we can leverage the power of React to compartmentalize our responsibilities. Let’s make a custom React component that will render a Formik Field and also handle the rendering of any error messages.

// TextField.tsx

import React from "react";
import { Field, FieldProps } from "formik";
import { FormValues } from "./app";

interface Props {
    title: string;
    name: string;
}

type OwnProps = FieldProps<FormValues> & Props;
const TextField: React.SFC<OwnProps> = ({ name, title, field, form }) => (
    <label htmlFor={name}>
        <div>{title}</div>
        <Field type="text" name={name}/>
        {
            form.touched[name] && form.errors[name]
            ? <div>{form.errors[name]}</div>
            : null
        }
    </label>
);

export default TextField;

I exported the FormValues interface so we can use it here. Now we can specify a TextField in our form:

import React from "react";
import { FieldProps } from "formik";
import { FormValues } from "./app";

interface Props {
    title: string;
}

type OwnProps = FieldProps<FormValues> & Props;
const TextField: React.SFC<OwnProps> = ({ title, field, form }) => (
    <label htmlFor={field.name}>
        <div>{title}</div>
        <input type="text" {...field}/>
        {
            form.touched[field.name] && form.errors[field.name]
            ? <div>{form.errors[field.name]}</div>
            : null
        }
    </label>
);

export default TextField;

Then back in our form:

// App...
<Field name="firstName" render={(innerProps) => (
    <TextField {...innerProps} title="First Name"/>
)}/>
// render the rest of the form...

Now we have a reusable text field component that isn’t tightly coupled to only a single field. Now we can add multiple text fields to our form, while having each form field maintain its own validation and styles. Let’s go ahead and add those styles now:

import styled from "styled-components";

const Title = styled.h2`
    font-family: Arial, Helvetica, sans-serif;
    color: cornflowerblue;
    margin-bottom: 5px;
`;

const FormInput = styled.input`
    border-color: gray;
    border: 1px solid;
    padding: 5px 5px;
    margin-bottom: 5px;
`;

const InputError = styled.div`
    color: red;
    font-family: Arial, Helvetica, sans-serif;
    margin: 15px 0;
`;

Adding them to our component:

// TextField.tsx
const TextField: React.SFC<OwnProps> = ({ title, field, form }) => (
    <label htmlFor={field.name}>
        <Title>{title}</Title>
        <FormInput type="text" {...field}/>
        {
            form.touched[field.name] && form.errors[field.name]
            ? <InputError>{form.errors[field.name]}</InputError>
            : null
        }
    </label>
);

Now we have a snazzy looking text field that’s easy to maintain both field logic and styles all in one component.

Case #4: Array of Fields

By now you’ll be asking me: «But Scott, I just wanna map over these same fields and be done with my life and finally go outside.» Boy do I have something for you! Formik ships with a helper React component called <FieldArray/>. This is a helper component that handles an array of the same type of fields. Suppose we have not one person, but three people that we want to know their first names and their preferred pet:

First, we’ll need to update our initialValues:

const initialValues: FormValues = {
    people: [
        {
            firstName: "",
            pet: "",
        },
        {
            firstName: "",
            pet: "",
        },
        {
            firstName: "",
            pet: "",
        },
    ],
};

And we’ll have a type error, so we need to fix that:

export interface FormValues {
    people: Array<{
        firstName: string;
        pet: string;
    }>;
}

And update our Yup schema:

validationSchema={object().shape({
    people: array().of(object().shape({
        firstName: string().required("Entering a first name is required"),
    })),
})}

Then we have our new form, with an array of duplicated fields!

const App: React.SFC = () => (
    <>
        <h1>Working with Formik</h1>
        <Formik initialValues={initialValues}
            onSubmit={(values: FormValues) => console.log(values)}
            validationSchema={object().shape({
                people: array().of(object().shape({
                    firstName: string().required("Entering a first name is required"),
                })),
            })}
            render={({ handleSubmit, errors, touched, values }) => (
                <Form>
                    <FieldArray name="people"
                    render={(helpers) => (
                        <div>
                            {values.people && values.people.length > 0 ? (
                                values.people.map( (person, index) => (
                                    <React.Fragment key={index}>
                                        <Field name={`people.${index}.firstName`} render={(innerProps) => (
                                            <TextField {...innerProps} title="First Name"/>
                                        )}/>
                                        <label htmlFor="pet">
                                            <div>Pet</div>
                                            <Field name={`people.${index}.pet`} component="select">
                                                <option value="Dog">Dog</option>
                                                <option value="Cat">Cat</option>
                                                <option value="Other">Other</option>
                                            </Field>
                                        </label>
                                    </React.Fragment>
                                ))
                            ) : null}
                        <button type="submit">Submit</button>
                        </div>
                    )}/>
                </Form>
            )}>
        </Formik>
    </>
);

But when we submit it, we need to update our TextField component to recognize which error to render:

// TextField.tsx
const TextField: React.SFC<OwnProps> = ({ title, field, form, index }) => (
    <label htmlFor={field.name}>
        <Title>{title}</Title>
        <FormInput type="text" {...field}/>
        {
            form.errors.people !== undefined
            && form.errors.people[index] !== undefined
            && form.touched.people !== undefined
            && form.touched.people[index] !== undefined
            ? <InputError>{form.errors.people[index].firstName}</InputError>
            : null
        }
    </label>
);

This will now allow us to have an array of text fields that have per-field validation! Using Yup with Formik is immensely powerful, as we can specify a single schema and leverage that across all of our form fields.

Summary

Formik is a fantastic way to compartmentalize smaller form chunks into their own field-level components, while allowing the parent form to control the validation of each form input according to a schema. Adding forms this way makes it much easier to maintain React forms because the child fields only need to render the field and the error messages if there is one. Each child field maintains that singular responsibility, while the parent form maintains the validation, submission, and rendering of children. Suppose we want to update our fields to add some sort of analyitics? It’s trivial to do so, as we can update our TextField.tsx file.

As always, pull requests and comments are greatly appreciated: https://github.com/scottdj92/forms-with-formik.