New Jun 30, 2025

Typescript issue with react component props when pass component as prop

Libraries, Frameworks, etc. All from Newest questions tagged reactjs - Stack Overflow View Typescript issue with react component props when pass component as prop on stackoverflow.com

I have a component with following props:

export function SortableItems<T extends { id: string }, K = unknown>({
  items: itemsFromProps,
  Item,
  onDragEnd,
  collisionDetection = closestCenter,
  strategy = verticalListSortingStrategy,
  className,
  additionalProps,
}: {
  items: T[];
  Item: React.ComponentType<SortableItemRendererProps<T> & K>;
  onDragEnd?: (data: {
    event: DragEndEvent;
    items: T[];
    setItems: Dispatch<SetStateAction<T[]>>;
  }) => void;
  collisionDetection?: CollisionDetection;
  strategy?: SortingStrategy;
  className?: string;
  additionalProps?: (item: T) => K;
}) {

So I want to make Item prop a react component type which implements SortableItemRendererProps<T> props but it can have some other props that these.

export type SortableItemRendererProps<T> = {
  item: T;
  dragOverlay?: boolean;
  handleProps?: SortableItemHandleProps;
  disabled?: boolean;
};

I tried to introduce second generic type K but then when trying to create that element

  <Item {...props} {...additionalProps?.(el)} />

I have an error:

  Type '{ item: T; dragOverlay: true; }' is not assignable to type 'K'.
      'K' could be instantiated with an arbitrary type which could be unrelated to '{ item: T; dragOverlay: true; }'.ts(2769)

How to fix it to allow Item component to accept additional props that these required by SortableItemRendererProps<T>?

Scroll to top