How can I create a nested form using Formik?

How can I create a nested form using Formik?

You can create a nested form in Formik by using the FieldArray component to manage an array of 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>
);

This will create a form where you can dynamically add or remove friends.

What if I want to add more fields to each friend?

You can create a nested object for each friend. For example, you can have friends as an array of objects, each containing name and age fields.