33

I'm trying to make a React component which takes in a generic type parameter which will be part of its prop type.

I want a solution that would look something like this:

interface TestProps<T> {
  value: T;
  onChange: (newValue: T) => void;
}

const Test: React.FC<TestProps<T>> = (props) => (
  <span>{props.value}</span>
);

I have seen that there is support for this in TypeScript 2.9 and I'm on 4.3.5.

Usage of this would look like this:

const Usage: React.FC = () => (
  <div>
    <Test<Obj>
      value={{ name: 'test' }}
      onChange={(newValue) => {
        console.log(newValue.name);
      }}
    />
  </div>
);

Code sandbox: https://codesandbox.io/s/react-typescript-playground-forked-8hu13?file=/src/index.tsx

1

3 Answers 3

31

You need to rewrite your Test component in this way

const Test= <T,>(props:TestProps<T>) => (
    <span>Some component logic</span>
);

Can you show the same with React.FC<TestProps>? It is impossible to do with FC.

This is FC implementation:

interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  // ... other static properties
}

As you might have noticed, FC is a function type, not type of props.

UPDATE

You can create higher order function, but I'm not sure if it worth it

const WithGeneric = <T,>(): React.FC<TestProps<T>> =>
  (props: TestProps<T>) => (
    <span>Some component logic</span>
  );
const Test = WithGeneric<Obj>()
7
  • Can you show the same with React.FC<TestProps<T>>?
    – AKX
    Aug 12, 2021 at 12:26
  • 3
    Made an update. It is impossible with FC Aug 12, 2021 at 12:29
  • Yes, FC is a function type, but the point of my question was that can you show a syntax that would allow annotating the generic arrow function with React.FC so it'd apply the same types (modified props, annotated return type, possible static additions).
    – AKX
    Aug 12, 2021 at 12:31
  • I made an update. you can wrap your component in higher order function. It worth use value argument to infer T instead of explicit generic parameter without value but it is up to you Aug 12, 2021 at 12:40
  • react native's Fast Refresh did not work for that component. When the parent component is saved, it reloaded. Does anyone know why it doesn't work? Jun 3, 2022 at 7:21
30

The easiest way is to make the generic FC a regular function, not an arrow function. (React.PropsWithChildren<> emulates what React.FC does to your props type.)

function Test<T>(props: React.PropsWithChildren<TestProps<T>>) {
    return <span>Some component logic</span>;
}
2
  • 1
    I've been agonizing over this recently. This is fine and dandy however there's no explicit statement in the code that Test is in fact a FC<TestProps<T>> for some arbitrary type T. AAMOF my understanding is that this kind of statement cannot be expressed but I don't have a clear mental model as to where the limitation originates from. Is it a shortcoming of the TS type system, or of the particular way FC is defined in React? Oct 13, 2022 at 12:07
  • 1
    you've missed something, React.FC does not only make sure the props are using type checking. but it also makes sure the return value of your function (function component) is valid, your function in the code above for example doesn't make sure of that
    – Normal
    Mar 10, 2023 at 22:05
15

In my case it was like the following codes:

export interface FormProps<T> {
  validator?: AnyObjectSchema;
  onSubmit?: (data: T) => void;
}

const Form = <T = any,>({
  children,
  validator,
}: PropsWithChildren<FormProps<T>>): JSX.Element => {
  ~~~

And in usage:

type MyType = ...

<Form<MyType>
  validation={something}
  onSubmit={handleSomething}
>
  <SomeCompo />
  <AnotherSomeCompo />
</Form>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.