React Hook Form useFieldArray overwriting my own id – Reactjs

by
Alexei Petrov
next.js react-hook-form react-typescript reactjs

Quick Fix: Specify a unique keyName prop when using React Hook Form’s useFieldArray. The default keyName is ‘id’, so if your field already has an ‘id’ property, React Hook Form will overwrite it when adding new entries. To avoid this, you can set keyName to a different value, like ‘_id’ or ‘uid’.

The Problem:

I’m using React Hook Form’s useFieldArray to create a dynamic list of form fields. Each item in the array has an id property that I need to preserve. However, when I try to render the form fields, the id property is being overwritten by React Hook Form. This is causing issues with my form validation and data manipulation.

The Solutions:

Solution 1: Use `keyName` to specify a different key

The `useFieldArray` hook from `react-hook-form` requires a unique `id` prop to be able to add new entries. However, you can specify a different `keyName` to be used instead. This is useful if you have an existing object with an `id` property that you want to use with the `useFieldArray` hook.

To specify a different `keyName`, pass it as the second argument to the `useFieldArray` hook. For example:

// myItemsThatHaveId is of type { id: number; something: string; }[] in the state

const { fields, update } = useFieldArray({
    control,
    name: 'myItemsThatHaveId',
    keyName: '_id'
});

// field will now have id: number; _id: string; something: string;

Solution 2: Change the keyName

In React Hook Form, the `useFieldArray` hook automatically overrides the `id` property of objects in the array. To prevent this, you can use the `keyName` prop to specify a different key to use for the array’s unique identifiers.
Here’s an example of how you would do this:

const { fields } = useFieldArray({
  control,
  keyName: 'uid', // Change the keyName to something else
  name: 'test',
});

This will use the `uid` property instead of the `id` property to uniquely identify each object in the array. You can then access the `uid` property of each object using the `item.uid` syntax.

By changing the keyName prop, you can prevent React Hook Form from overriding the id property, and you can use the id property for your own purposes.

Solution 3: Using form.getValues to set the id

To prevent `useFieldArray` from overriding your custom `id` property, you can use the `form.getValues` method to retrieve the current value of the `id` field. Here’s an updated section of your code that demonstrates this approach:

<Button onClick={() => update(index, { id: form.getValues("testArray.${index}.id"), testArray: [...item.test, 0] })}>Add Number To Array</Button>

In this updated code, we use `form.getValues(“testArray.${index}.id”)` to get the current value of the `id` field for the item at the specified `index`. This ensures that the `id` property is not overwritten when you add a new item or update an existing one.

Q&A

In react-hook-form, is keyName prop a valid solution to override id from being overwritten while using useFieldArray?

Yes, setting keyName to a different value like _id or uid can prevent id from being overwritten.

Video Explanation:

The following video, titled "How to use MaterialUI Autocomplete with React Hook Form (1/2 ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Play video

Your browser can't play this video. Learn more.