useRepeater
Provides functionality for managing and manipulating repeatable form fields within a form context.
Repeater Props
name
Required
Name of the fields collection
connect
Allows you to connect your repeater to a form.
initialValues
Allows you to pass some initial values to the form. If a collection field is mounted, it will lookup into this value to set his initial value. If you don't manually connect to a form you don't need to pass initialValues, there will be automatically set.
In the case useRepeater is define at same level that form, you should pass
connect and initialValues
Repeater Values
keys
Array of autogenerated keys for each collection item.
length
Number of items in the collection.
insert(index, data)
Allows to add an item at specified index.
insertMultiple(index, data)
Allows to add a list of items at specified index.
append(data)
Allows to add an item at the end of the collection.
prepend(data)
Allows to add an item at the begin of the collection.
remove(index)
Allows to remove an item at specified index.
removeMultiple(indexes)
Allows to remove multiple items at specified indexes.
set(collection)
Allows to change the value of all the collection.
// Case with repeater defined in a form context
const collection = useRepeater({
name: "members",
});
{collection.keys.map((key, index) => (
<div key={key}>
<MyField name={`members[${index}].name`} />
</div>
))}
// Case with repeater and form defined at same level
const form = useForm();
const collection = useRepeater({
name: "members",
connect: form,
initialValues: [{ name: "Hugo" }],
});
{collection.keys.map((key, index) => (
<div key={key}>
<MyField name={`members[${index}].name`} />
</div>
))}