Registering nested components without drilling parent name?

[atrauzzi]

If I have a tree of components that are meant to be responsible for different parts of my form "graph", is there any special technique I can use when drilling the register function around?

I'm trying to think of the best way to explain this in terms that won't get mixed up and are easy to pick up, so I'll just use an example where I hack it together with currying:

export const MyTopLevelComponent({register}) {

    const name = "top-level"
    const {...} = register(name)

    return <div>
        <h1>Top Level</h1>
        <MyNestedComponent register={(nestedName: string) => register(`${name}.${nestedName}`)} />
    </div>
}

Is there a proper "in-support" way of accomplishing this so that I'm not having to drill and manipulate my parent names down into child components?

[oluwatunmiisheii]

have you checked out usFormContext and FormProvider? https://react-hook-form.com/docs/formprovider

[atrauzzi]

I'm aware of them, but it isn't clear to me in any of the docs if the names nest in the way I describe above.

If I have a component named "product", and then some ways further into the component tree, I have "name", do I have to include "product" in the "name" component and thus have to drill the string down?

Or will the context automatically know that "name" is a descendent component of "product" (somewhere), and automatically create the name "product.name"?