CODEWITHSUNDEEP
typescripttypescript-typings
Anthony Kong
Anthony Kong

Reputation: 40664

What kind of element is going to be returned from the function?

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}>

enter image description here

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

Upvotes: 0

Views: 33

Answers (1)

Matt McCutchen
Matt McCutchen

Reputation: 30919

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'}/>;

Upvotes: 2

Related Questions