I have a React ponent 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=".6.3/umd/react.production.min.js"></script>
<script src=".6.3/umd/react-dom.production.min.js"></script>

I have a React ponent 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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

and I am calling it inside another ponent like this

import { SuperTileSummary} from './SuperTileSummary'

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 ponent. 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 ponent.

• javascript
• reactjs

• Have you tried return chooseRegularTileByEntity(); ? – TKoL Commented Mar 3, 2021 at 17:02
• @Milos isn't it simply that SuperTileSummary is not imported? – Hiro Commented Mar 3, 2021 at 17:03
• I think the problem is that he's returning a function that returns JSX, rather than returning JSX. that's what the error message says – TKoL Commented Mar 3, 2021 at 17:03
• What is your question? The error message tells you exactly what is wrong. – Håken Lid Commented Mar 3, 2021 at 17:04
• 1 That might be a problem with your other ponents. In your switch section, try just changing both to a normal <p>text</p> and see if that works. If the p tags work, then it's a problem with those other ponents – TKoL Commented Mar 3, 2021 at 17:07

2 Answers 2

You can call chooseRegularTileByEntity function to get the returned value:

return chooseRegularTileByEntity();

or use it as ponent:

const ChooseRegularTileByEntity = () => {
    //...
};

return <ChooseRegularTileByEntity />

The error message, 'SuperTileSummary' cannot be used as a JSX ponent. Its return type '() => JSX.Element' is not a valid JSX element., suggests that you're giving back a function that returns a JSX element where it expects a JSX element itself.

I believe the fix is to change return chooseRegularTileByEntity; to return chooseRegularTileByEntity(); The former is the function that returns JSX, the latter is the returned JSX itself