How to use Generics with the props of a component?

Question

I’m trying to create a component that will accept a generic type within the props. I’m trying to do it this way:

interface Props<T> {
  items: T[];
}

const componente: React.FC<Props<T>> = (props) => {...}

However, this way it returns an error saying that T has not been defined. What would be the correct way to create a component with generic props?

Answer 1

Just use as a generic of normal functions, Typescript will understand that it is an React component when you call it.

Thus:

interface Props<T> {
  items: T[];
}

//                  ↓↓↓
function MyComponent<T>(props: Props<T>) {
  return (
    <>{JSON.stringify(props.items, null, 2)}</>
  );
}

Note that you will not be able to use a Arrow Function using the type React.FC, since the generic would have to come afterward. The guy React.FC adds the property children implicitly. So, if your component has to use that prop, just modify the interface Props:

interface Props<T> {
  items: T[];
  children: React.ReactNode;
}

To define the generic in the component, use this notation:

<MyComponent<string> items={['A', 'B', 'C']} />
<MyComponent<number> items={[1, 2, 3]} />

In the end, you’ll have something like:

import React from 'react';

interface Props<T> {
  items: T[];
}

function MyComponent<T>(props: Props<T>) {
  return (
    <>{JSON.stringify(props.items, null, 2)}</>
  );
}

function MainComponent() {
  return (
    <> 
      <MyComponent<string> items={['A', 'B', 'C']} />
      <MyComponent<number> items={[1, 2, 3]} />
    </>
  );
}

See working on Typescript playground.