How to make a functional React component with generic type?


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) => (

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 = () => (
      value={{ name: 'test' }}
      onChange={(newValue) => {

Code sandbox:


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>;

Answered By – AKX

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.