How do I implement form validation in React?

How do I implement form validation in React?

You can use controlled components and state to manage form inputs, along with validation libraries like Formik or Yup.

Can you show me a simple example using Formik?

Sure! Here's a basic 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 add more fields in the initialValues and update the validate function to include additional validation logic for each field.