How to have working TypeScript type-checking when extract form fields into components

[vesan]

Hey,

I'm having issue with extracting form fields to separate components. If I have a form field directly inside a form, types pass but after extracting types do not pass.

I created a simplified codesandbox of the issue: https://codesandbox.io/p/sandbox/react-hook-form-nested-fields-example-v2-9w7gj9

Code is in App.tsx. Inside FormFields there is type error Type 'string' is not assignable to type 'Path<Values>'. If I inline the code from FormFields to FormA it works. I've tried different typings and I can only get it to type error on either name or control inside FormFields being passed to useController.

I've tried to search an example that would do this but have not found any from the official website or from Github.com.

How should I type things to make it work?

[sujinleeme]

Control is the generic type so you can fill the type argument with form value type.

function FormFields({
  control,
}: {
  control: Control<FormFieldInputs>;
}) {
  // Type error happens here
  const { field } = useController({ name: "example", control });
  return <input {...field} />;
}

[vesan]

Thanks a lot for the answer!

I took it from a way more complex situation (multiple different kinds of dynamic forms sharing the fields) but it seems I complicated the types too much trying to get it to work there. But like in your example, there is no need to add generic for FormFields. 👍