How to pass a Generic type to a functional component props which also extends another Interface for its props?

Question

Explantion

I'm creating a dynamic input form using the FormProvider from react-hook-form.

const formMethods = useForm<TSongFormData>();
return (
    <FormProvider {...formMethods}>
       <SongInputForm />
    </FormProvider>
)

In the SongInputForm component I have my actual form which will have the input components which I have created for every input elements like input teaxtarea and so on...

const SongForm = () => {
  const { handleSubmit } = useFormContext<TSongFormData>();
  return (
        <form
          onSubmit={handleSubmit((data) => console.log("data", data))}
        >
          <InputElement label="Song Name" name="name" />
          <InputElement label="Author" name="author" />
          <input type="submit" />
        </form>
    );
  };
}

The InputElementccomponent would receive all the props for the input element itself and the name prop would be a union type TSongFormDataKey of all the keys of the form data.

interface ITextInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  name: TSongFormDataKey;
}

const InputElement = ({ name, label, ...restProps }: ITextInputProps) => {
  const { register } = useFormContext<TSongFormData>();
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input id={name} {...restProps} {...register(name)} />
    </div>
  );
};

Question

As of now, I have hardcoded the types TSongFormData and TSongFormDataKey in the InputElement component. But how do I pass both the types TSongFormData and TSongFormDataKey as generics to the InputElement component so that I can make it dynamic and have more flexibility on the type of props passed to it??

What I'm looking for is something like this:

interface ITextInputProps<T> extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  name: T;
}

const InputElement = <T,K>({ name, label, ...restProps }: ITextInputProps<T>) => {
  const { register } = useFormContext<K>();
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input id={name} {...restProps} {...register(name)} />
    </div>
  );
};

where T would be TSongFormData and K would be TSongFormDataKey.

I've created a codesandbox if anyone wants to play with it: https://codesandbox.io/s/elastic-sanne-uz3ei8

I'm new to typescript and trying to get my head around generics, but finding it so hard.

Any help would be greatly appreciated. Thanks

This post helped me a bit when working with genric type: https://stackoverflow.com/questions/68757395/how-to-make-a-functional-react-component-with-generic-type My question is rather why do you want to do this? Feels like it could be solved without generic types? — Disco, Nov 25 '22 at 09:59
@Disco I'm trying to have a single ```InputElement``` component for all the forms I would have. So even if the form data structure changes, I can pass the type as generics — Jerome Marshall, Nov 25 '22 at 10:11

score 2 · Accepted Answer · answered Nov 25 '22 at 10:01

You can make the ITextInputProps type generic and the InputElement name generic. For name we can use the Path generic type from useFormContext. keyof T would also work, except register expects a Path<T>, and while that will include keyof T, while Path still has unresolved type parameters (such as T) typescript won't be able to follow that relationship.

When you instantiate the component, you will have to specify the argument explicitly: <InputElement<TSongFormData> label="Song Name" name="name" />

You can also create a specialized version of input field for a specific type using an instantiation expression in newer versions of TS:

const SongInputElement = InputElement<TSongFormData>

Putting it all together we get:


interface ITextInputProps<T> extends React.InputHTMLAttributes<HTMLInputElement> {
  label?: string;
  name: Path<T>;
}

const InputElement = <T extends FieldValues>({ name, label, ...restProps }: ITextInputProps<T>) => {
  const { register } = useFormContext<T>();
  return (
    <div>
      <label htmlFor={name}>{label}</label>
      <input id={name} {...restProps} {...register(name)} />
    </div>
  );
};



const SongForm = () => {
  const { watch, handleSubmit } = useFormContext<TSongFormData>();

  return (
    <InputElement<TSongFormData> label="Author" name="author" />
  );
};

const SongFormV2 = () => {  
  const { watch, handleSubmit } = useFormContext<TSongFormData>();
  const SongInputElement = InputElement<TSongFormData>
  return (
    <SongInputElement label="Song Name" name="name" />
  )
};

Playground Link

man, you are the best!! Works flawlessly! I never knew the thing you mentioned about Path. Thanks a ton! — Jerome Marshall, Nov 25 '22 at 11:04

How to pass a Generic type to a functional component props which also extends another Interface for its props?

Explantion

Question

1 Answers1