Type 'Element | undefined' is not assignable to type 'FC<any> | undefined'

Question

In this MainHeader component:

<MainHeader
  LeftButton={
    previous ? (
      <BackButton
        onPress={() => {
          navigation.goBack;
        }}
      />
    ) : (
      undefined
    )
  }
  ...
/>

BackButton is a JSX element passed down through the LeftButton prop to MainHeader and is explicitly typed as const BackButton: React.FC<BackButtonProps>, so then I would expect the LeftButton prop to be typed as follows:

interface MainHeaderProps {
  LeftButton: React.FC<any> | undefined;
  ...
}

But I get this error when trying to assign BackButton | undefined to the LeftButton prop: Type 'Element | undefined' is not assignable to type 'FC<any> | undefined'. ...so I change my type to

interface MainHeaderProps {
  LeftButton: JSX.Element | undefined;
  ...
}

Error goes away. But now I get an error when I try to use <LeftButton /> in MainHeader: JSX element type 'LeftButton' does not have any construct or call signatures. So after doing some reading I'm even more confused about what type I should be using... I try many different types from @types/react like ComponentType to try and define LeftButton by its constructor, but TypeScript enforces that LeftButton be typed as JSX.Element, so I'm not sure how to best resolve this.

Answer 1

React.FC<any> is the type of a functional component. A function that returns rendered JSX.

JSX.Element is the type of the return value of a functional component, already rendered.

So you can use JSX.Element, pass in your component as are you already doing, and then display it simply with this, since you already pass in props and rendered it.

<div>{props.LeftButton}</div>