Registering nested objects with React Hook Form

Question

I have been working with RHF for a while and it helps a lot actually, but I have been trying to do something for what I have not enough knowledge maybe.

So the thing its that I have a nested object that I bring to my componen throw props

const Child = ({ globalObject, register }) => {
    const renderNested = Object.entries(globalObject.nestedObject);
    

    return (
                        <span>
                            {renderNested.map(([key, value], index) => {
                                return (
                                    <div key={index}>
                                        <Field
                                            type="text"
                                            label={key}
                                            name{`nestedObject.${key}`}
                                            defaultValue={value}
                                            ref={register}
                                        />
                                    </div>
                                );
                            })}
                        </span>

    );
};

All good, now, one of the keys inside this nestedObject has another object as a value, for which when I map over them and display, the field will show: [object Object] I know how I would solve that issue if I am using a useState, for example. Not sure if its a good practice but I would go with something like:

defaultValue={typeof value === 'someKey' ? value[key] : value}

but in this case using register (which I want to use since it saved me from other nightmares) I am not sure how to solve this. Should I filter the array outside and then render for one side the keys that dont have an object as a value and then the rest? It looks to me like it has to be something better than that. Can anyone give advices?

just to clarify, nestedObject looks like:

nestedObject: {
key: value
key: {key:value}
}

Answer 1

You can access the fields using . dot notation, as per documentation for the register method. So register("name.key") works to retrieve the nested object as well as arrays, however note that in React Hook Form v7 the syntax to retrieve nested array items changed from arrayName[0] to arrayName.0.

Your component would look similar to the following:

const Child = ({ globalObject, register }) => {
  const nestedKeys = Object.keys(globalObject.nestedObject);

  return (
    <>
      {nestedKeys.map((key) => (
        <Field key={key} {...register(`nestedObject.${key}`)} />
      ))}
    </>
  );
};

You should not use index as key prop in this case, as you have another stable identifier for each array element which comes from unique nested object keys.