DefaultValues with FieldArray

[orixjintaokoong]

The problem I'm solving

A CRUD application with prefilled forms after getting from an API from a promise, users can remove and add items into the array dynamically and update the item via an API on submit.

Current approach

After getting a response, I will render a form and set the values as the defaultValues in the option for useForm.

The issue

After setting as default, when I remove one of the existing item from the array and adding a new one, the newly added item which I expect to have all empty values, now are prefilled with the previously deleted item's values.

Workaround

To use some sort of onMount logic to set the values of the form using form.setValue("fields", data.fields"). However, this can get complex as the form grows.

Codesandbox (reproduce)

codesandbox

[orixjintaokoong]

My suspicion is the defaultValues are literally like the ones in native HTML elements, which is predefined if the field has value == null. Hence, when I append an empty object all the previous values are populated instead of using empty values. I'm just wondering if there is an alternative or a better way around the issue.

[Moshyfawn]

If you are appending a new array item, you should provide default values for each field in the object, as opposed to an empty object.

From useFieldArray docs:

Important: append data is required and not partial.

- fields.append({})
+ fields.append({
+   name: "",
+   age: ""
+ })