setValue of parent to affect child field

[ryan-mardiono-sal]

Hey wondering if there is an option for my usecase, or if this goes against the react-hook-form rules.

I have a form with a field: suburb: { id: 1, text: "test" }

Then I have a component using the Controller <FormTextBox name="suburb.text"/>.

If I setValue("suburb.text", ""), then this will make it empty, but if I set setValue("suburb", null), this doesn't change the value field that the controller receives to null, it just keeps its previous value.

My TextBox component also does support input={inputValue ?? ""}. So I believe this is just due to the Controller renderer not detecting the field update due to registering against the suburb.text rather than suburb.

What could I do here to keep this same method? Thanks

[oluwatunmiisheii]

You're correct in your analysis! This relates to how React Hook Form's Controller handles nested field updates.

1. Your Controller is registered to watch suburb.text specifically
2. When you call setValue("suburb", null), react-hook-form updates the suburb object at the root level
3. The Controller doesn't re-render because it's only watching the suburb.text path, not the parent suburb object

An alternative solution is to reset the form like so

reset({
  ...getValues(),
  suburb: null
});

[BrendanC23]

You'll run into issues with <FormTextBox name="suburb.text"/> if suburb is null because there won't be an object to set the text value of. In this case, typing in the input won't do anything.

One option is to ensure that your SuburbText component only renders when the suburb value isn't null.

function Suburb() {
    const suburb = useWatch({ name: "suburb" });

    if (suburb) {
        return (
            <SuburbId />
            <SuburbText />
        );
    } else {
        // Render something different if suburb is null
    }
}