Home > Mobile >  typescript has a problem with react-hook-form fieldArray of numbers field name
typescript has a problem with react-hook-form fieldArray of numbers field name

Time:12-04

Very long title but essentially there is a Type 'string' is not assignable to type 'never'.ts(2322) fieldArray.d.ts(7, 5): The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps<FormValues, never, "id">' error on the fieldArray definition in react-hook-form that sometimes disappears but is there most of the time and i have no idea why it is there since all examples show it like that and it sometimes without any changes disappears. Does anyone have a clue what the issue is? Why is typescript complaining?

I've tried changing versions, reordering the control and name values (it removed the error once and when i swapped them again it came back and no matter how many times i swapped them around again it stayed there).

It's one of those errors I have not the slightest clue where it's coming from.

Codesandbox link here: https://codesandbox.io/s/react-hook-form-list-of-numbers-s6zg2p?file=/src/App.tsx

Edit: error is specifically on line 35.

CodePudding user response:

It looks like the issue is with the type of the 'name' prop in the fieldArray definition. The 'name' prop is expected to be of type 'never', but in your code it is being passed as a string. You can fix this by either changing the type of the 'name' prop to be a string, or by passing a value of 'never' to the 'name' prop.

Here is an example of how you could fix this issue by changing the type of the 'name' prop:

// In the fieldArray definition:
const { fields, append, remove } = useFieldArray({
  name: 'numbers' // Change the type of the 'name' prop to be a string
});

And here is an example of how you could fix this issue by passing a value of 'never' to the 'name' prop:

// In the fieldArray definition:
const { fields, append, remove } = useFieldArray({
  name: 'numbers' as never // Pass a value of 'never' to the 'name' prop
});

CodePudding user response:

You just need to update the version of react-hook-form. I checked above code and on updating version it worked fine. Also it was later fixed here https://github.com/react-hook-form/react-hook-form/blob/4f52102e52434ab81385856bbf81561b3253c3cb/src/types/fieldArray.ts

  • Related