Define props with generic type in React

Question

I am using React with TypeScript in the following way:

interface MyComponentProps {
    ...
    ...
}

const MyComponent:FunctionComponent<MyComponentProps> = props => {
    ...
    ...
    ...
}

Now I need to define the following props type:

interface MyComponent2Props<T> {
    prop1: T,
    ...
}

I tried to define the component:

const MyComponent2<T>:FunctionComponent<MyComponent2Props<T>> = props => {
    ...
    ...
    ...
}

But this is incorrect syntax.

What is the correct way to define such component?

I don't have the rep to comment, but this is what I've found: [How to use generics in props in React in a functional component?](https://stackoverflow.com/questions/53958028/how-to-use-generics-in-props-in-react-in-a-functional-component) — alparius, Sep 04 '19 at 21:54

score 5 · Answer 1 · answered Sep 04 '19 at 22:02

You could try something like this:

import * as React from "react";
import { render } from "react-dom";

import "./styles.css";

interface Props<T> {
  a: T;
}

const Component = <T extends {}>(props: Props<T>) => {
  return <div>{props.a}</div>;
};

function App() {
  return <Component a="testing" />;
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

You can view the example here.

Note the extends {} is necessary in a tsx file. See: What is the syntax for Typescript arrow functions with generics?

score -3 · Accepted Answer · answered Sep 05 '19 at 14:26

-3

Try this:

const MyComponent2 = <T>(props: SomeProps): FunctionComponent<MyComponent2Props<T>> => {}

answered Sep 05 '19 at 14:26

ehutchllew

940
8
14

Define props with generic type in React

2 Answers2