Unable to reset form using object with a nested array

[astb01]

Hi

I am trying to reset a form using default values and values that are loaded from an API call (the structure of both objects are the same).

However when I try to reset the form with apiValues structure I find that RHF fails to use the values in the nested structure (i.e. the employees structure from the API is not used at all) and instead when I do getValues on the field in question I see an empty array, i.e. the defaultValues are shown:

const defaultValues = {
   "sports": [],
    "employees": []
}

And the object created from an API call:

const apiValues = {
   "sports": [ "football"],
    "employees": [{
        "department": "marketing",
        "emails": [{  "email": "foo1@test.co.uk"  },
                         { "email": "foo2@test.co.uk" },
        ]
    }]
}

In the component I do this once I have fetched the API data:

reset({
   ...defaultValues,
   ...apiValues
})

The sports array is however populated with the API data correctly in the form when I use reset

When I view the data that exists in apiValues in the debugger I can see that the employees emails are populated, however after reset is called, I am just presented with the defaultValues value which is an empty array.

I have also tried to provide dummy values to defaultValues as such:

const defaultValues = {
    "employees": [{
        "department": "",
        "emails": [{
               "email": ""
        }]
    }]
}

What is puzzling is the object (that I merge) before passing it to the reset function has all the values I expect to see (i.e. from the API and any defaults). It seems to me RHF is stripping or ignoring the nested structure and just defaulting back to an empty array?!

I am using RHF 7.45.4

Any help/tips would be greatly appreciated!

[astb01]

SB link: https://codesandbox.io/p/sandbox/cocky-fermat-wmrkfh

[astb01]

My alternative approach which I don't want to be doing is adding entries manually to the field array when my component mounts from the data received from the api call

[astb01]

Hoping for @bluebill1049 or someone to help.

I have tried also to use useFieldArray and append the api values and it still doesn't set the values for the nested "employees" array

[noahtaggart]

I think I'm experiencing a similar issue, did you ever find a solution to this?

[astb01]

I think the key was either to add the loaded data into the default values or where you need that deep array, to populate the useFieldArray at that level.