Property 'x' does not exist on type 'Record<"id", string>'.

[alvamanu]

I'm using useFieldArray and it seems impossible to assign type to an iteration of field in fields array inside this hook. The full error here:

Others are having the same issue.

https://stackoverflow.com/questions/75102410/property-number-does-not-exist-on-type-recordid-string-in-react-js

Please update us on how to fix this. Thanks.

[Moshyfawn]

Thanks for linking to the Stackoverflow question! I took the time to answer the question there, but I'll repost it here for your convenience.

In React, the context type doesn't propagate down the components tree. When calling useHookFormContext in your child ReleaseFields component, there isn't a way for the hook to know the type of your form values you defined in your parent component unless you explicitly pass the control object down for useHookFormContext to derive the type from.

The solution would be to import your InitiateHoldModel form type down in your child ReleaseFields component and pass it into the useHookFormContext hook as the first generic type.

// App.tsx
export interface InitiateHoldModel { ... }

const defaultValues: InitiateHoldModel = { ... }

function App() {
  useHookForm({ defaultValues })

  return <form>...</form>
}
// ReleaseFields.tsx
import type { InitiateHoldModel } from "./App"

function ReleaseFields() {
  const { registerState, control } = useHookFormContext<InitiateHoldModel>() // pass the form model type here
}