Blog>
Snippets

Adding New Items to a Dynamic Array in TanStack Form

Showcase the process of adding new items to a dynamic array within a form, including the use of a button to trigger the addition.
import { useFieldArray, useForm } from 'react-hook-form';
Importing necessary hooks from react-hook-form.
const { control } = useForm();
Initializing the useForm hook to control the form.
const { fields, append } = useFieldArray({ control, name: 'items' });
Initializing the useFieldArray hook to manage dynamic items array.
const addItem = () => { append({ itemName: '', quantity: 0 }); };
Defines a function to add a new item with default values.
return (
  <div>
    {fields.map((field, index) => (
      <input key={field.id} name={`items[${index}].itemName`} />
    ))}
    <button onClick={addItem}>Add Item</button>
  </div>
);
Renders the dynamic array of inputs and a button that adds a new item when clicked.