How can I integrate Yup schema validation with my React app?

How can I integrate Yup schema validation with my React app?

You can integrate Yup with React by using it alongside Formik or React Hook Form for form validation. Would you like a code example?

Yes, please provide a code example using Formik.

Sure! First, install Yup and Formik. Then, you can create a form like this:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string().min(6, 'Too Short!').required('Required'),
});

const MyForm = () => (
  <Formik
    initialValues={{ email: '', password: '' }}
    validationSchema={validationSchema}
    onSubmit={values => { console.log(values); }}
  >
    {() => (
      <Form>
        <Field name="email" type="email" />
        <ErrorMessage name="email" component="div" />
        <Field name="password" type="password" />
        <ErrorMessage name="password" component="div" />
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);
export default MyForm;

That looks great! How do I handle form submission errors?

You can handle submission errors by using the onSubmit function in Formik. You can catch errors and set them in the form state. Would you like to see an example?