React Hook Form with Nested Objects: Issue with Default Values and Validation
I've looked through the documentation and I'm still confused about I'm trying to implement a form using React Hook Form (v7) that involves nested objects, but I'm running into issues with setting default values and validating the nested fields. I have a form structure where I need to capture user details and their addresses, structured like this: `user: { name: '', email: '', address: { street: '', city: '' } }`. Here’s a simplified version of my code: ```javascript import React from 'react'; import { useForm, Controller } from 'react-hook-form'; const UserForm = () => { const { control, handleSubmit, setValue } = useForm({ defaultValues: { user: { name: '', email: '', address: { street: '', city: '', }, }, }, }); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <Controller name="user.name" control={control} render={({ field }) => <input {...field} />} /> <Controller name="user.email" control={control} render={({ field }) => <input {...field} />} /> <Controller name="user.address.street" control={control} render={({ field }) => <input {...field} />} /> <Controller name="user.address.city" control={control} render={({ field }) => <input {...field} />} /> <button type="submit">Submit</button> </form> ); }; export default UserForm; ``` Despite this structure, I noticed that the default values for the nested fields (specifically `address.street` and `address.city`) are not being set correctly on the initial render. Additionally, when I submit the form, the validation doesn't seem to trigger for the nested fields, even though I have not provided any specific validation rules. I’ve tried using `setValue` to manually set default values after the form is initialized, but it didn't resolve the issue. I also confirmed that I’m using the correct field names in the `Controller` components. I can see the form is structured properly, and I'm not getting any error messages, but the behavior is not what I expect. Has anyone faced similar issues with nested objects in React Hook Form, and how can I ensure that the default values are set correctly and validation works as intended? For context: I'm using Javascript on Windows 10. Is there a better approach? I'm coming from a different tech stack and learning Javascript. I appreciate any insights!