issue: FieldArrayWithId type does not resolve the id field type

[milichev]

Version Number

7.53.0

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/react-hook-form-field-array-kz743v

Steps to reproduce

FieldArrayWithId type does not resolve the id field type.

Consider the following schema:

type Website = {
  id: number;
  url: string;
  title: string;
};

type FormData = {
  websites: Website[];
};

  const { control } = useForm<FormData>();
  const websitesFieldArray = useFieldArray({ control, name: "websites" });

then the id field property type is never:

  websitesFieldArray.fields.reduce((acc, { id, url }) => {   // id: never

If the array item id field type in the schema is string, it is resolved properly:

type Website = {
  id: string;

  ...

  websitesFieldArray.fields.reduce((acc, { id, url }) => {   // id: string

Describe the solution you'd like A fix in the FieldArrayWithId type can be applied to resolve the target model ID field type properly.

Additional context

• Here is the codesandbox.

• When the id field is NOT string:

• When the id field IS string:

Expected behaviour

When the schema array item ID field is number:

type Website = {
  id: number;

the id property of the form array field should also be number.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[bluebill1049]

id is preserved for useFieldArray, have you tried use keyName props? I think next major update, we will rename id to key so it's less confusing.

[milichev]

id is preserved for useFieldArray, have you tried use keyName props?

Yep, the keyName does nothing in this case:

I think next major update, we will rename id to key so it's less confusing.

Could you suggest the appropriate way to get the key prop value?

[HiggsWRX]

I'm running into the same problem. react-hook-form should use some other name not as generic as id to generate its ids for performant list rendering and use instead something like fieldId or the likes so less guaranteed to shadow our own objects

[bluebill1049]

I'm running into the same problem. react-hook-form should use some other name not as generic as id to generate its ids for performant list rendering and use instead something like fieldId or the likes so less guaranteed to shadow our own objects

I agree, we would need a breaking change and not doing it now.

[mparsakia]

Hi @bluebill1049, a minor question/request. I was taking a look at the useFieldArray hook source and have a use case that that would help if we could get the generated IDs at create time rather than how the insertion functions currently return void.

We have a field array and the fields are inside of accordions, and would like to do something like this to add a new item. Unfortunately it doesn’t return the generated id and trying to access fields inside the callback has the wrong length so we can’t “get last item” from the field[] and access its .id

// example of what would be nice, so we can use this to track states
  const handleAddNew = useCallback(() => {
    const newId = append(newItem);
      setOpenAccordions((prev) => [...prev, newId]);
    }
  }, [append, fields]);

So would it be feasible to return the generated ID from the append, insert, etc? Or better, the entire field state at after the transaction, and we can extract the id ourselves?