TanStackT
TanStack12mo ago
7 replies
broad-emerald

Array of Forms

What is the best approach to have a list of forms with multiple fields?

Use Case: List of task cards with select box and editable content. User can modify content and toggle select, then use submit to add all tasks.

I tried following the example for array fields, but not sure how to relate to form arrays. Should TaskCard accept form directly? How to properly tell TaskCard which item in task array?

<form.Field name="tasks" mode="array">
{(field) => {
return (
<>
{field.state.value.map((task, i) => {
return (
<Grid2 key={i}>
<TaskCard form={form} />
</Grid2>
);
})}
</>
);
}}
</form.Field>
Was this page helpful?