How would one pass a component to a helper?

Question

I want to pass a component to a helper and have that helper return an array of objects, each with a component node...

// helpers.ts
import { LINKS } from '../constants';
// error on the next line: Cannot find name 'Component'. ts(2304)
const createLinks = (component: Component) => {
  return LINKS.map((props) => {
    return ({
      content: <Component {...props} />,
      id: props.id
    });
  });
};

// component.tsx
import { List, SpecialLink } from '../components';
import { createLinks } from '../helpers';
const LinkList = () => {
  const links = createLinks(SpecialLink);
  return <List items={links}>
}

score 1 · Accepted Answer · answered Sep 29 '21 at 06:18

You should use the ComponentType type of react, so the component argument can be class component or function component.

type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;

import React from 'react';
import { ComponentType } from 'react';

const LINKS: any[] = [];
const createLinks = (Component: ComponentType) => {
  return LINKS.map((props) => {
    return {
      content: <Component {...props} />,
      id: props.id,
    };
  });
};

How would one pass a component to a helper?

1 Answers1