Component cannot be used as a JSX component

  javascript, reactjs

I have a React component like this

import React from 'react';
import { ECOTileSummary } from './ECOTileSummary';
import { TileSummary } from './TileSummary';

interface SuperTileSummaryProps {
  date?: string;
  location: string;
  link: string;
  title: string;
  nextVisit?: string | null;
  tileEntity?: string;
}

export const SuperTileSummary = ({
  date,
  location,
  link,
  title,
  nextVisit,
  tileEntity,
}: SuperTileSummaryProps) => {
  const chooseRegularTileByEntity = () => {
    switch (tileEntity && tileEntity) {
      case 'EmailCampaign':
        return <ECOTileSummary date={date} link={link} location={location} title={title} />;
      default:
        return (
          <TileSummary
            nextVisit={nextVisit}
            date={date}
            link={link}
            location={location}
            title={title}
          />
        );
    }
  };
  
  return chooseRegularTileByEntity;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

and I am calling it inside another component like this

import { SuperTileSummaryProps} from './SuperTileSummaryProps'

export const Wrapper = () => {
   return(
       <div>
          <SuperTileSummary 
             nextVisit={nextVisit}
             date={date}
             link={link}
             location={location}
             title={title}
             tileEntity={tileEntity}
           />
       </div>
   );
 };

and I am getting an error like this: ‘SuperTileSummary’ cannot be used as a JSX component.
Its return type ‘() => JSX.Element’ is not a valid JSX element.
Type ‘() => Element’ is missing the following properties from type ‘Element’: type, props, keyts(2786)’.
I am not sure what am I doing wrong here since I’m rendering the component.

Source: Ask Javascript Questions

LEAVE A COMMENT