There can be situations in which the user needs to add or remove fields from a form depends on the amount of fields they need to fill out. Using React Cool Form, we can use the useFieldArray hook to easily deal with this situation.
useFieldArray hook helps you to deal with multiple similar fields. You pass it a
name parameter with the path of the field that holds the relevant array. The hook will then give you the power to render an array of inputs as well as common array/list manipulations.
When dealing with dynamic list fields we can apply focus to a new field by the focus method to provide better for the user.
When working with nested fields, we can just pass in the parent path to the
focus method. It will apply the focus to the first field.
useFieldArray hook also supports you to work with conditional fields.
You can validate the top-level field via the Form-level Validation or Field-level Validation (via the
validate option), depending on your case. React Cool Form runs validation after any array manipulations.