Assign/get custom key value for useFieldArray

[donysukardi]

Is your feature request related to a problem? Please describe.
I'm using useFieldArray with controlled <Accordion> component from ant-design. Newly added entry would have to be expanded by default. In order to do that, I need to have the key value of the new entry to be added to Accordion state.

Describe the solution you'd like

• Assign custom key value, or
• Get assigned key value returned from append, prepend, etc.

Describe alternatives you've considered

• I've managed to get it work by assigning custom key value with append({ uuid: 'xxx' }). However, I'm getting warning: useFieldArray fieldValues contain the keyName uuid which is reserved for use by useFieldArray.

Additional context
N.A.

[bluebill1049]

U should use ur own key and stored in a hidden input, hook form id is purely made for react render.

[donysukardi]

Understood. Though I think it'll be useful and reduce workaround if we could have something like

const id = append({})

[bluebill1049]

thanks for the suggestion @donysukardi what's your usage like?

[donysukardi]

currently I have controlled Accordion component. I need to automatically expand the newly added accordion row (which is added via react-hook-form).

const [accordionKeys, setAccordionKeys] = React.useState([]);

function addRow() {
  append({});
  // need to add this newly added row to accordionKeys
}

What I've done now is to generate uuid manually when calling append,

const [accordionKeys, setAccordionKeys] = React.useState([]);

function addRow() {
  const uuid = uuid();
  append({ uuid });
  // add uuid to accordionKeys
}

[jpodpro]

I have the exact same problem. There doesn't appear to be any way to know what the new automatically-assigned ID is.

[DevrMichael]

I ran into the same issue and this approach worked for me. useFieldArray reserves id internally, so if you want to assign a custom key to use in something like an Accordion, you can include your own property (like uuid) but make sure you don’t try to override id. For example:

append({ name: "", uuid: crypto.randomUUID() });

Then in your Accordion, you can use uuid as the expanded key. React Hook Form will ignore extra fields, so you won’t break the array logic.

The warning shows up if you try to use uuid as the keyName in useFieldArray, because only id is reserved. The workaround is to just keep id for RHF internally and use another field for your UI keys.

This worked perfectly for me without any extra hacks.