How do I use useFieldArray with a generic Control Type?

[HvZimmermann]

I am trying to build a custom component that takes a generic control from a useForm. In this component i want to use useFieldArray to add a variable amount of input fields.

When I set my generic component up to take any fields additionally to the ones I care about, I always get a type error in various places along the lines of:

 The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps<T, ArrayPath<T>, "id">'

I want to do this, so that I can reuse my custom components with different forms that all include my relevant fields.

Check my mini example here: https://codesandbox.io/p/sandbox/bold-hooks-pwq6k7?file=%2Fsrc%2FApp.tsx

[sujinleeme]

I grabbed the hint from here.

[playground]

import React from 'react';
import { Control, useFieldArray, useForm } from "react-hook-form";

type GenericFormData = {
  theFieldICareAbout: { name: string }[];
};

type FirstFormValues = {
  task: string;
} & GenericFormData;

type SecondFormValues = GenericFormData;

type GenericComponentProps<TFormValues> = {
  control: TFormValues extends GenericFormData ? Control<TFormValues> : never;
};

function GenericComponent<TFormValues extends GenericFormData>({
  control,
}: GenericComponentProps<TFormValues>) {
  const { append } = useFieldArray({
    control,
    name: "theFieldICareAbout",
  });

  const onAppendQuestionGroup = () =>
    append({
      name: "",
    });
  return <div></div>;
}

export default function App() {
  const { control } = useForm<FirstFormValues>();
  const { control: secondFormControl } = useForm<SecondFormValues>();

  return (
    <div>
      <GenericComponent control={control} />
      <GenericComponent control={secondFormControl} />;
    </div>
  );
}

[HvZimmermann]

Thank you!

[Blakeinstein]

Is it possible to also make the key theFieldICareAbout generic? Like the parent component can pass the key name as prop?

[mhuggins]

@Blakeinstein I'm struggling with the same thing. Did you ever figure this out?

[Blakeinstein]

@Blakeinstein I'm struggling with the same thing. Did you ever figure this out?

Unfortunately no I dont think I was able to do that :(

[alyyousuf7]

I think I was able to come up with a solution - but it's not perfect:

// ListDocumentInput.tsx
import { Card, List } from '@mui/material';
import { FieldArrayPath, useFieldArray, UseFieldArrayProps } from 'react-hook-form';

import ListItemDocument from './ListItemDocument';
import { Document } from './services';

type FieldValuesWith<TValue> = {
  [key: string]: TValue;
};

type UseFieldArrayWithGenericValueProps<TValue> = UseFieldArrayProps<
  FieldValuesWith<TValue[]>,
  FieldArrayPath<FieldValuesWith<TValue[]>>
>;

const ListDocumentInput = ({
  ...controllerProps
}: UseFieldArrayWithGenericValueProps<Document>) => {
  const { fields, remove } = useFieldArray({
    ...controllerProps,
    keyName: 'internalId',
  });

  return (
    <List component={Card}>
      {fields.map((doc, index) => (
        <ListItemDocument key={doc.internalId} document={doc} onRemove={() => remove(index)} />
      ))}
    </List>
  );
};

export default ListDocumentInput;

Usage:

// App.tsx
type FormValues = {
  documents1: Documents[];
  documents2: Documents[];
};

export default function App() {
  const formMethods = useForm<FormValues>({ defaultValues: { documents: [] } });

  return (
    <FormProvider {...formMethods}>
      <ListDocumentInput name="documents1" />
      <ListDocumentInput name="documents2" />
    </FormProvider>
  );
}

It enforces the FormValue inside ListDocumentInput.tsx to consider all keys to have the generic type array value - hence making sure we get typings for it from useFieldArray