How to add a new Field when a button is clicked?

[animanoir]

I have a Select component and under it there's a button to basically create another one. I have researched ways of doing this, but I haven't found anything concise.

I read that FieldArray might help, and I'm trying to understand the example provided in the documentation. But it doesn't solves my problem:

            <FieldArray
              name='dischargeNorms'
              render={(arrayHelpers, index) => (
                <div>
                  <label>Norma de evaluación de descarga</label>
                  {
                    dummyNorms.normas.map(() => (
                      <div key={`norm-${index}`}>
                        <Field
                          name={`norm-${index}`}
                          type='select'
                          component={DUIKSelect}
                          options={
                            dummyNorms.normas
                        }
                        />
                      </div>
                    ))
                  }
                  <button
                    className='modal__addBtn'
                    onClick={
                      () => {
                        console.log('add norm');
                        arrayHelpers.insert(index+1,'');
                      }
                    }
                    type='button'
                  >
                    <span className='btn__addNorm'>
                      <img src={svgAdd} alt='Añadir norma' />
                      AGREGAR NORMA
                    </span>
                  </button>
                </div>
              )}
            />
          </FormGroup>

[harshagarwalnyu]

FieldArray is exactly the right tool. The key is arrayHelpers.push() to add a new item:

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

function MyForm() {
  return (
    <Formik
      initialValues={{ selects: [{ value: '' }] }}  // start with one select
      onSubmit={(values) => console.log(values)}
    >
      {({ values }) => (
        <Form>
          <FieldArray name="selects">
            {(arrayHelpers) => (
              <div>
                {values.selects.map((select, index) => (
                  <div key={index}>
                    <Field as="select" name={`selects.${index}.value`}>
                      <option value="">Choose...</option>
                      <option value="a">Option A</option>
                      <option value="b">Option B</option>
                    </Field>

                    {/* Remove button — only show if more than one */}
                    {values.selects.length > 1 && (
                      <button type="button" onClick={() => arrayHelpers.remove(index)}>
                        Remove
                      </button>
                    )}
                  </div>
                ))}

                {/* THIS is the button to add another select */}
                <button
                  type="button"
                  onClick={() => arrayHelpers.push({ value: '' })}
                >
                  Add another
                </button>
              </div>
            )}
          </FieldArray>

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

Key points:

• arrayHelpers.push({ value: '' }) — adds a new item with the same shape as your initial values. Match the shape to whatever your Field names expect.
• name={selects.${index}.value} — dot notation indexes into the array. Formik handles the nested path automatically.
• arrayHelpers.remove(index) — removes by index, triggers re-validation.
• arrayHelpers.swap(a, b) / move(from, to) / insert(index, value) — other useful helpers.

The render prop in the docs (render={(arrayHelpers) => ...}) is the older API — the children-as-function pattern above ({(arrayHelpers) => ...}) is equivalent and preferred.