<FieldArray />

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik';
3 
4 // Here is an example of a form with an editable list.
5 // Next to each input are buttons for insert and remove.
6 // If the list is empty, there is a button to add an item.
7 export const FriendList = () => (
8   <div>
9     <h1>Friend List</h1>
10     <Formik
11       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
12       onSubmit={values =>
13         setTimeout(() => {
14           alert(JSON.stringify(values, null, 2));
15         }, 500)
16       }
17       render={({ values }) => (
18         <Form>
19           <FieldArray
20             name="friends"
21             render={arrayHelpers => (
22               <div>
23                 {values.friends && values.friends.length > 0 ? (
24                   values.friends.map((friend, index) => (
25                     <div key={index}>
26                       <Field name={`friends.${index}`} />
27                       <button
28                         type="button"
29                         onClick={() => arrayHelpers.remove(index)} // remove a friend from the list
30                       >
31                         -
32                       </button>
33                       <button
34                         type="button"
35                         onClick={() => arrayHelpers.insert(index, '')} // insert an empty string at a position
36                       >
37                         +
38                       </button>
39                     </div>
40                   ))
41                 ) : (
42                   <button type="button" onClick={() => arrayHelpers.push('')}>
43                     {/* show this when user has removed all friends from the list */}
44                     Add a friend
45                   </button>
46                 )}
47                 <div>
48                   <button type="submit">Submit</button>
49                 </div>
50               </div>
51             )}
52           />
53         </Form>
54       )}
55     />
56   </div>
57 );

1 <Form>
2   <FieldArray
3     name="friends"
4     render={arrayHelpers => (
5       <div>
6         {values.friends.map((friend, index) => (
7           <div key={index}>
8             {/** both these conventions do the same */}
9             <Field name={`friends[${index}].name`} />
10             <Field name={`friends.${index}.age`} />
11 
12             <button type="button" onClick={() => arrayHelpers.remove(index)}>
13               -
14             </button>
15           </div>
16         ))}
17         <button
18           type="button"
19           onClick={() => arrayHelpers.push({ name: '', age: '' })}
20         >
21           +
22         </button>
23       </div>
24     )}
25   />
26 </Form>

1 const schema = Yup.object().shape({
2   friends: Yup.array()
3     .of(
4       Yup.object().shape({
5         name: Yup.string().min(4, 'too short').required('Required'), // these constraints take precedence
6         salary: Yup.string().min(3, 'cmon').required('Required'), // these constraints take precedence
7       })
8     )
9     .required('Must have friends') // these constraints are shown if and only if inner constraints are satisfied
10     .min(3, 'Minimum of 3 friends'),
11 });

1 // within a `FieldArray`'s render
2 const FriendArrayErrors = errors =>
3   errors.friends ? <div>{errors.friends}</div> : null; // app will crash

1 // within a `FieldArray`'s render
2 const FriendArrayErrors = errors =>
3   typeof errors.friends === 'string' ? <div>{errors.friends}</div> : null;

1 import { Field, getIn } from 'formik';
2 
3 const ErrorMessage = ({ name }) => (
4   <Field
5     name={name}
6     render={({ form }) => {
7       const error = getIn(form.errors, name);
8       const touch = getIn(form.touched, name);
9       return touch && error ? error : null;
10     }}
11   />
12 );
13 
14 // Usage
15 <ErrorMessage name="friends[0].name" />; // => null, 'too short', or 'required'

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 export const FriendList = () => (
5   <div>
6     <h1>Friend List</h1>
7     <Formik
8       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
9       onSubmit={...}
10       render={formikProps => (
11         <FieldArray
12           name="friends"
13           render={({ move, swap, push, insert, unshift, pop }) => (
14             <Form>
15               {/*... use these however you want */}
16             </Form>
17           )}
18         />
19     />
20   </div>
21 );

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 
5 export const FriendList = () => (
6   <div>
7     <h1>Friend List</h1>
8     <Formik
9       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
10       onSubmit={...}
11       render={formikProps => (
12         <FieldArray
13           name="friends"
14           component={MyDynamicForm}
15         />
16       )}
17     />
18   </div>
19 );
20 
21 
22 // In addition to the array helpers, Formik state and helpers
23 // (values, touched, setXXX, etc) are provided through a `form`
24 // prop
25 export const MyDynamicForm = ({
26   move, swap, push, insert, unshift, pop, form
27 }) => (
28  <Form>
29   {/**  whatever you need to do */}
30  </Form>
31 );

1 import React from 'react';
2 import { Formik, Form, Field, FieldArray } from 'formik'
3 
4 
5 export const FriendList = () => (
6   <div>
7     <h1>Friend List</h1>
8     <Formik
9       initialValues={{ friends: ['jared', 'ian', 'brent'] }}
10       onSubmit={...}
11       render={formikProps => (
12         <FieldArray name="friends">
13           {({ move, swap, push, insert, unshift, pop, form }) => {
14             return (
15               <Form>
16                 {/*... use these however you want */}
17               </Form>
18             );
19           }}
20         </FieldArray>
21       )}
22     />
23   </div>
24 );