How do I validate nested form fields in my application?

How do I validate nested form fields in my application?

To validate nested form fields, you can use a library like Formik or React Hook Form. They provide built-in support for nested structures.

Can you show me an example using Formik?

Sure! Here's a simple example:

<Formik
  initialValues={{ user: { name: '', email: '' } }}
  onSubmit={values => { console.log(values); }}
>
  {({ handleChange, handleSubmit }) => (
    <form onSubmit={handleSubmit}>
      <input
        name="user.name"
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        name="user.email"
        onChange={handleChange}
        placeholder="Email"
      />
      <button type="submit">Submit</button>
    </form>
  )}
</Formik>

What about validation rules for those fields?

You can define validation rules using Yup. For example:

const validationSchema = Yup.object().shape({
  user: Yup.object().shape({
    name: Yup.string().required('Name is required'),
    email: Yup.string().email('Invalid email').required('Email is required'),
  }),
});

How do I integrate Yup with Formik?

You can pass the validationSchema prop to Formik like this:

<Formik
  validationSchema={validationSchema}
  ...
>