Handling Nested Form Arrays with Formik and Yup Validation in React
Quick question that's been bugging me - I'm working on a project and hit a roadblock. After trying multiple solutions online, I still can't figure this out. I'm currently working on a form using Formik and Yup for validation, and I'm working with an scenario with nested form arrays. I have a form where users can add multiple addresses, each containing fields for street, city, and postal code. The scenario arises when validating these nested arrays. I'm able to add and remove address fields dynamically, but when I try to submit the form, the validation doesn't seem to apply correctly to each address object. Instead of validating the entire addresses array, it only checks the first entry. Here's a simplified version of my code: ```javascript import React from 'react'; import { Formik, Field, FieldArray, Form, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const validationSchema = Yup.object().shape({ addresses: Yup.array().of( Yup.object().shape({ street: Yup.string().required('Street is required'), city: Yup.string().required('City is required'), postalCode: Yup.string().required('Postal code is required').matches(/^[0-9]{5}$/, 'Must be exactly 5 digits'), }) ) }); const MyForm = () => { return ( <Formik initialValues={{ addresses: [{ street: '', city: '', postalCode: '' }] }} validationSchema={validationSchema} onSubmit={(values) => { console.log(values); }} > {({ values }) => ( <Form> <FieldArray name="addresses"> {({ remove, push }) => ( <div> {values.addresses.map((_, index) => ( <div key={index}> <Field name={`addresses.${index}.street`} placeholder="Street" /> <ErrorMessage name={`addresses.${index}.street`} component="div" /> <Field name={`addresses.${index}.city`} placeholder="City" /> <ErrorMessage name={`addresses.${index}.city`} component="div" /> <Field name={`addresses.${index}.postalCode`} placeholder="Postal Code" /> <ErrorMessage name={`addresses.${index}.postalCode`} component="div" /> <button type="button" onClick={() => remove(index)}>Remove</button> </div> ))} <button type="button" onClick={() => push({ street: '', city: '', postalCode: '' })}>Add Address</button> </div> )} </FieldArray> <button type="submit">Submit</button> </Form> )} </Formik> ); }; export default MyForm; ``` When I try to submit the form with incomplete fields in the second address, I get an behavior message, but it only highlights the first address's street field instead of acknowledging that the second address is invalid. I've tried debugging with console logs and ensuring that my validation schema is correctly set, but I'm not sure what I'm missing. Does anyone have insights on how to ensure that Yup validates each address object in the array properly? I'm using Formik version 2.2.6 and Yup version 0.32.11. Any ideas what could be causing this? What's the best practice here? Any help would be greatly appreciated! I'd love to hear your thoughts on this.