MENU


<FieldArray>

<FieldArray /> is a component that helps with common array/list manipulations. You pass it a name property with the path to the key within values that holds the relevant array. <FieldArray /> will then give you access to array helper methods via render props. For convenience, calling these methods will trigger validation and also manage touched for you.


import React from 'react';import { Formik, Form, Field, FieldArray } from 'formik';const App = () => (
  <div>
    <h1>Friend List</h1>
    <Formik
      initialValues={{ friends: ['jared', 'ian', 'brent'] }}
      onSubmit={values =>
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500)
      }
    >
      {({ values }) => (
        <Form>
          <FieldArray name="friends">
            {arrayHelpers => (
              <div>
                {values.friends && values.friends.length > 0 ? (
                  values.friends.map((friend, index) => (
                    <div key={index}>
                      <Field name={`friends.${index}`} />
                      <button
                        type="button"
                        onClick={() => arrayHelpers.remove(index)}>
                        -
                      </button>
                      <button type="button"
                        onClick={() => arrayHelpers.insert(index, '')}>+</button>
                    </div>))
                ) : (
                  <button type="button" onClick={() => arrayHelpers.push('')}>
                    Add a friend
                  </button>)}
                <div><button type="submit">Submit</button></div>
              </div>
            )}
          </FieldArray>
        </Form>
      )}
    </Formik></div>); export default App;