ForEachElement

<ForEachElement> safely iterates array elements. It accepts an array field and a render prop as its child, which is called once for each element.

The counterpart hook is useElements.

Sample usage

const form = useForm({
   initialValues: {
       tags: ["typescript", "react"]
   }
});
return (
    <ForEachElement field={form("tags")}>
        { tagField => <Input field={tagField} /> }
    </ForEachElement>
)

Type

function ForEachElement<T>(props: {
    /** The array field to iterate over */
    field: FormField<T[]>

    /** A render function that will be used for each child */
    children: (
        /** The child to render */
        element: FormField<NoInfer<T>>,
        /** The index of the child to render. Mostly useful for removing by index */
        idx: number
    ) => ReactNode;
}): ReactNode[]