reactjs - Declaring Generics in React Typescript Function Component

Question

I am working on a TypeScript React component whose props also take a generic type, so I declare the React component as

export interface MyCompProps<T> {
  items: T[];
  labelFunction: (T) => string;
  iconFunction: (T) => JSX.Element;
}


export const MyComp: FunctionComponent<MyCompProps<T>> = (props: MyCompProps<T>) => {
  // rendering logic goes here
}

Obviously that didn’t do well with TypeScript compiler. What would be the proper syntax to achieve that goal?

Answer 1

Here is sample, you need to fill up your addition properties.

import React,{FC} from 'react';
    export interface MyCompProps<T> {
      items: T[];
      labelFunction: (T) => string;
      iconFunction: (T) => JSX.Element;
    }
    export interface MyModel {
      //all your properties
    }
    
    export const MyComp: FC<MyCompProps<MyModel>> = (props: MyCompProps<MyModel>) => {
     
      return (<div>sd</div>)
    }