Type error with generic useFieldArray component (UseFormReset values and values are incompatible)

[tparvi]

Codesandbox: https://codesandbox.io/s/rhf-generic-field-array-8ub8ee?file=/src/CustomerForm.tsx

I am trying to build generic component that uses useFieldArray to enable user to edit list of persons. I have defined the types as follows so there is generic type used by the PersonList component and customer/employee specific types. Note that the types are exactly the same except CustomerFormData has additional property foo which causes the type error inside RHF.

export type Person = {
  name: string;
};

// Used by generic component that shows list of users
export type GenericFormData = {
  persons: Person[];
};

// customer form specific data
export type CustomerFormData = {
  foo: number; // comment out this and RHF type error goes away
  persons: Person[];
};

// employee form specific data
export type EmployeeFormData = {
  persons: Person[];
};

My generic component is:

import React from "react";
import { Control, useFieldArray } from "react-hook-form";
import "./styles.css";
import { GenericFormData } from "./types";

type PersonListProps = {
  control: Control<GenericFormData>;
};

export function PersonList(props: PersonListProps): React.ReactElement {
  const { fields } = useFieldArray({
    name: `persons`,
    control: props.control
  });

  return (
    <>
      {fields.map((item) => {
        return <div key={item.id}>{item.name}</div>;
      })}
    </>
  );
}

I try to use my generic component like this:

export function CustomerForm(): React.ReactElement {
  const { control } = useForm<CustomerFormData>({
    defaultValues: {
      foo: 1,
      persons: [{ name: "customer 1" }, { name: "customer 2" }]
    }
  });

  return (
    <div>
      <h2>Customers</h2>
      <PersonList control={control} />
    </div>
  );
}

This is the type error from the <PersonList.. line from inside the RHF. How do I fix this issue? I assumed that if the type looks like GenericFormData then it should just work.

Type 'Control<CustomerFormData, any>' is not assignable to type 'Control<GenericFormData, any>'.
  Types of property '_reset' are incompatible.
    Type 'UseFormReset<CustomerFormData>' is not assignable to type 'UseFormReset<GenericFormData>'.
      Types of parameters 'values' and 'values' are incompatible.
        Type 'GenericFormData | { persons?: ({ name?: string | undefined; } | undefined)[] | undefined; } | ResetAction<GenericFormData> | undefined' is not assignable to type 'CustomerFormData | { foo?: number | undefined; persons?: ({ name?: string | undefined; } | undefined)[] | undefined; } | ResetAction<CustomerFormData> | undefined'.
          Type 'ResetAction<GenericFormData>' is not assignable to type 'CustomerFormData | { foo?: number | undefined; persons?: ({ name?: string | undefined; } | undefined)[] | undefined; } | ResetAction<CustomerFormData> | undefined'.
            Type 'ResetAction<GenericFormData>' is not assignable to type 'ResetAction<CustomerFormData>'.
              Type 'GenericFormData' is not assignable to type 'CustomerFormData'.ts(2322)
PersonList.tsx(7, 3): The expected type comes from property 'control' which is declared here on type 'IntrinsicAttributes & PersonListProps'

[martin-wahlberg]

If you type your component like this it should work:

type PersonListProps<FormType extends GenericFormData> = {
  control: FormType extends GenericFormData ? Control<FormType> : never;
};

export function PersonList<FormType extends GenericFormData>(
  props: PersonListProps<FormType>
): React.ReactElement {

}

This makes the ts compiler recognize that the only possible value for props is a controller with the required fields.

I updated your code sandbox here :)
https://codesandbox.io/s/rhf-generic-field-array-forked-fmc340?file=/src/PersonList.tsx

[dd-jonas]

@martin-wahlberg I've been looking so long for a solution to this, thanks! Could you explain why this works? At first glance it looks redundant as the extends constraint already happens when creating the generic variable.

[martin-wahlberg]

I'm not completely sure. Maybe @mattpocock is able to enlighten us. 🙏

[danielmarcano]

I would also love to know why this is working, as I also thought that the extends constraint should be enough...

[danielmarcano]

Thanks for the solution, though! It works like a charm 🥰

[Yavanha]

you're amazing