How do I use FieldArray in Formik?

How do I use FieldArray in Formik?

FieldArray is a component in Formik that helps manage an array of fields in your form. You can use it to dynamically add or remove fields.

Can you show me a code example?

Sure! Here's a simple example:

import { Formik, Field, FieldArray } from 'formik';

const MyForm = () => (
  <Formik
    initialValues={{ friends: [''] }}
    onSubmit={values => console.log(values)}
  >
    {({ values }) => (
      <Form>
        <FieldArray name="friends">
          {({ push, remove }) => (
            <div>
              {values.friends.map((friend, index) => (
                <div key={index}>
                  <Field name={`friends.${index}`} />
                  <button type="button" onClick={() => remove(index)}>Remove</button>
                </div>
              ))}
              <button type="button" onClick={() => push('')}>Add Friend</button>
            </div>
          )}
        </FieldArray>
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

What if I want to validate the fields?

You can use Formik's validation schema with Yup to validate the fields in the FieldArray. Just define your validation rules and pass them to Formik.