useFieldArray
Creates a reactive field array store of a specific field array within a form store.
const fieldArray = useFieldArray<TSchema, TFieldArrayPath>(form, config);Generics
TSchemaextends FormSchemaTFieldArrayPathextends RequiredPath
Parameters
formFormStore<TSchema>configUseFieldArrayConfig<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
fieldArrayFieldArrayStore<TSchema, TFieldArrayPath>
Examples
The following example shows how useFieldArray can be used.
Todo list
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.