How can I integrate form validation in my React app?

How can I integrate form validation in my React app?

You can use libraries like Formik or React Hook Form for easy form validation. Would you like a code example?

Yes, please provide a code example using Formik.

Sure! Here's a simple example:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

const MyForm = () => {
  return (
    <Formik
      initialValues={{ email: '' }}
      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;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <ErrorMessage name="email" component="div" />
          <button type="submit" disabled={isSubmitting}>Submit</button>
        </Form>
      )}
    </Formik>
  );
};

This will validate the email field.

What if I want to add more fields and validations?

You can easily add more fields by including additional <Field> components and updating the initialValues and validate functions accordingly. Would you like to see an example with multiple fields?