Myujth

I have created the following function:

const linkRenderer = (link: string) => 
 <a href=link target='_blank' rel='noopener'/>;

I want to pass to the a function with this signature

function renderComponent(
 PageComponent: React.ComponentType< page: Page, anchorRenderer(link: string): React.Component>
) 

....

 const page = new Page();
 const linkRenderer = (link: string) => <a href=link target='_blank' rel='noopener'/>;
 return <PageComponent page=page anchorRenderer=linkRenderer />

Typescript rejects the React.Component type of anchorRenderer. Here is the error message:

Type 'Element' is not assignable to type 'Component<, , any>'.
Property 'setState' is missing in type 'Element'.

So I want to switch the

React.ComponentType< page: Page, anchorRenderer(link: string): React.Component> 

to

React.ComponentType< page: Page, anchorRenderer(link: string): React.Element>

However as you can see in the above screenshot, there are many Element type. Which one should I pick?

You are looking for JSX.Element, which is the type of any JSX element expression such as <a href=link target='_blank' rel='noopener'/>.

However, using a custom function type for a function that returns a JSX.Element is somewhat unconventional. It would be more conventional to let the link renderer be a real stateless function component that takes the link as a prop. That is, anchorRenderer would be of type React.ComponentType<link: string>, and you would set:

const linkRenderer = (props: link: string) =>
 <a href=props.link target='_blank' rel='noopener'/>;