How can I use Formik for form validation in my React app?

How can I use Formik for form validation in my React app?

Formik is a popular library for managing forms in React. It simplifies form handling and validation. You can start by installing Formik using npm or yarn.

What are the basic steps to set up Formik?

First, import Formik and Form components from 'formik'. Then, wrap your form in the <Formik> component, providing initial values and a validation function.

Can you show me an example of a validation function?

Sure! A simple validation function could look like this:

const validate = values => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  } else if (!/\S+@\S+\.\S+/.test(values.email)) {
    errors.email = 'Invalid email address';
  }
  return errors;
};

How do I display error messages in the form?

You can access errors from Formik's props and display them next to the corresponding fields. For example:

<Field name="email" />
<ErrorMessage name="email" component="div" />