React Academy · Lesson

Dynamic Fields with useFieldArray

Add, remove, and reorder dynamic form fields using the useFieldArray hook.

Dynamic Fields with useFieldArray is a free React Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will use React Hook Form's useFieldArray hook to build forms with dynamic lists of fields — like adding, removing, and reordering items.

What Is useFieldArray?

useFieldArray manages an array of fields inside a React Hook Form. It provides append, prepend, remove, swap, move, and insert methods to manipulate the field list.

import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

Setup: control from useForm

useFieldArray requires the `control` object from useForm. Destructure it alongside register and handleSubmit.

const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

Rendering the Fields

Map over `fields` to render each item. Use the field's `id` as the React key (not the index). Register each field with the array path syntax.

return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

Appending New Fields

Call append() with a default value object to add a new field to the end of the list. The form automatically registers it.

<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

Removing Fields

Call remove(index) to delete a field at a specific position. All subsequent fields shift down and their registrations update automatically.

<button onClick={() => remove(index)}>Delete</button>

Minimum Fields Validation

You can validate the array length in a Zod schema with .min() to ensure at least one field exists.

const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

Swapping and Moving Fields

Use `swap(indexA, indexB)` to exchange two fields, or `move(from, to)` to reposition a field. These are used to build drag-and-drop sortable field lists.

swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

Nested useFieldArray

You can nest useFieldArray inside another useFieldArray for multi-level dynamic forms (e.g. an invoice with line items, each with sub-items).

Submitting Array Data

On submit, handleSubmit passes the full array as part of the data object. Access it at data.phoneNumbers — an array of objects matching the field structure.

const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

Quick Check

Why should you use field.id (not the array index) as the React key when rendering useFieldArray fields?

Recap

useFieldArray gives you fields array and append/remove/swap/move methods. Use field.id as React key, register with 'fieldName.index.subfield' syntax, and validate arrays with Zod min/max.

Course Complete

Congratulations! You finished **Managing Forms with React Hook Form**. You can now build performant forms with RHF, apply Zod schema validation, and create dynamic field arrays.

Frequently asked questions

Is the “Dynamic Fields with useFieldArray” lesson free?

Yes — the full text of “Dynamic Fields with useFieldArray” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Dynamic Fields with useFieldArray”?

Add, remove, and reorder dynamic form fields using the useFieldArray hook. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Dynamic Fields with useFieldArray” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy