# useFieldArray

> This document is the Markdown version of [formisch.dev/react-native/api/useFieldArray/](https://formisch.dev/react-native/api/useFieldArray/). For the complete documentation index, see [llms.txt](https://formisch.dev/llms.txt).

Creates a reactive field array store of a specific field array within a form store.

```ts
const fieldArray = useFieldArray<TSchema, TFieldArrayPath>(form, config);
```

## Generics

- `TSchema` `extends FormSchema`
- `TFieldArrayPath` `extends RequiredPath`

## Parameters

- `form` `FormStore<TSchema>`
- `config` `UseFieldArrayConfig<TSchema, TFieldArrayPath>`

### Explanation

With `useFieldArray` you create a reactive field array store for a specific array field within your form. The field array store provides reactive access to the array items (by their IDs), validation errors, touched state, and more. This is particularly useful when working with dynamic arrays of fields that users can add or remove. Use the item IDs as the `key` when mapping over the array items.

## Returns

- `fieldArray` `FieldArrayStore<TSchema, TFieldArrayPath>`

## Examples

The following example shows how `useFieldArray` can be used.

### Todo list

```tsx
import {
  Field,
  insert,
  remove,
  useFieldArray,
  useForm,
} from '@formisch/react-native';
import { Button, Text, TextInput, View } from 'react-native';
import * as v from 'valibot';

const TodoSchema = v.object({
  todos: v.array(
    v.object({
      label: v.pipe(v.string(), v.nonEmpty()),
    })
  ),
});

export default function TodosScreen() {
  const todoForm = useForm({ schema: TodoSchema });
  const fieldArray = useFieldArray(todoForm, { path: ['todos'] });

  return (
    <View>
      {fieldArray.items.map((item, index) => (
        <View key={item}>
          <Field of={todoForm} path={['todos', index, 'label']}>
            {(field) => (
              <View>
                <TextInput {...field.props} value={field.input} />
                {field.errors && <Text>{field.errors[0]}</Text>}
              </View>
            )}
          </Field>
          <Button
            title="Remove"
            onPress={() => remove(todoForm, { path: ['todos'], at: index })}
          />
        </View>
      ))}
      {fieldArray.errors && <Text>{fieldArray.errors[0]}</Text>}
      <Button
        title="Add todo"
        onPress={() =>
          insert(todoForm, { path: ['todos'], initialInput: { label: '' } })
        }
      />
    </View>
  );
}
```

## Related

The following APIs can be combined with `useFieldArray`.

### Hooks

[`useForm`](/react-native/api/useForm.md), [`useField`](/react-native/api/useField.md)

### Components

[`Field`](/react-native/api/Field.md), [`FieldArray`](/react-native/api/FieldArray.md)

### Methods

[`focus`](/methods/api/focus.md), [`getDeepErrors`](/methods/api/getDeepErrors.md), [`getErrors`](/methods/api/getErrors.md), [`getInput`](/methods/api/getInput.md), [`insert`](/methods/api/insert.md), [`move`](/methods/api/move.md), [`remove`](/methods/api/remove.md), [`replace`](/methods/api/replace.md), [`reset`](/methods/api/reset.md), [`setErrors`](/methods/api/setErrors.md), [`setInput`](/methods/api/setInput.md), [`swap`](/methods/api/swap.md), [`validate`](/methods/api/validate.md)