[JSX element type 'Component' does not have any construct or call signatures.ts(2604)] 에러 해결

리액트 컴포넌트와 숫자를 인자로 받아 숫자만큼 리액트 컴포넌트를 복제해서 반환하는 duplicate 함수를 만들었다.

function duplicate(Component: JSX.Element, number: number) {
  return (
    <>
      {Array.from({ length: number }).map((value, index) => (
        <Component key={index} />
      ))}
    </>
  );
}

그러자 JSX element type 'Component' does not have any construct or call signatures.ts(2604)라고 에러가 떴다.

duplicate 함수의 인자로 리액트 컴포넌트를 만드는 consturctor를 넘긴 것이 아니라 만들어진 instance를 넘겨서 문제가 되었던 것이다. 아래와 같이 컴포넌트 constructor을 넘기고 해결했다.

export default function duplicate(
  Component: () => JSX.Element,
  number: number
) {
  return (
    <>
      {Array.from({ length: number }).map((value, index) => (
        <Component key={index} />
      ))}
    </>
  );
}