How to use FieldArray Component of Formik in React? 

<FieldArray/> component of Formik Library is used for managing a list of form fields (mostly in forms).

In cases like when we don’t exactly know how many fields will there be required (as in a todo app, we can’t know how many tasks user will put into), we use <FieldArray/> component.


We use this component inside <Formik> and <Form> tags that also come from formik library.

To use this import {FieldArray, Form, Formik} from formik and do as follow.

import { Form, Formik, FieldArray } from "formik";

export const TodoApp = () => (
  <Formik initialValues={{ todos: [] }}>
      {/* Pass name of the array, i.e. `todos` */}
      <FieldArray name="todos">
        {({ form, ...fieldArrayHelpers }) => {
          const onAddClick = () => {
              id: values.todos.length,
              content: "",
              isCompleted: false

          return (
              <button onClick={onAddClick}>Add Item</button>
              {{ id }, index) => (
                <TodoItem key={id} index={index} />

Leave a Reply

Your email address will not be published. Required fields are marked *