Typescript error around using generics using extends {}

Question

type List<T> = {
  items: T[];
  clickHandler: (a: T) => void;
};

const List = <T extends {}>({
  items,
  clickHandler,
}: List<T>) => {
  return (
    <div>
      {items.map((item, index) => (
        <div key={index} onClick={() => clickHandler(item)}>
          {item} // error is showing here
        </div>
      ))}
    </div>
  );
};

export default List;

typescript Error Type 'T' is not assignable to type 'ReactNode'. Type '{}' is not assignable to type 'ReactNode'. Type 'T' is not assignable to type 'ReactPortal'. Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, propsts(2322)

score 4 · Accepted Answer · answered Oct 02 '22 at 08:30

4

It seems you want to render the items of type T. You have to ensure react that T is "renderable type".

One way to do this is:

const List = <T extends ReactNode>

More info here

answered Oct 02 '22 at 08:30

Svetoslav Petkov

1,117
5
13

score 1 · Answer 2 · answered Oct 02 '22 at 08:46

Since you're rendering items as children of div you can also define it as

const List = <T extends JSX.IntrinsicElements['div']['children']>(

which internally is defined as React.ReactNode would result in the same as @Svetoslav Retkov's answer

TS Playground

Typescript error around using generics using extends {}

2 Answers2