Component cannot be used as a JSX component

Question

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

@Milos isn't it simply that SuperTileSummary is not imported? — Hiro
– 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
– TKoL, Commented Mar 3, 2021 at 17:03
What is your question? The error message tells you exactly what is wrong. — Håken Lid
– Håken Lid, Commented Mar 3, 2021 at 17:04
That might be a problem with your other components. 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 components — TKoL
– TKoL, Commented Mar 3, 2021 at 17:07

lissettdm · Accepted Answer · 2021-03-03 17:14:00Z

1

You can call chooseRegularTileByEntity function to get the returned value:

return chooseRegularTileByEntity();

or use it as component:

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

return <ChooseRegularTileByEntity />

answered Mar 3, 2021 at 17:14

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TKoL · Accepted Answer · 2021-03-03 17:05:04Z

1

The error message, 'SuperTileSummary' cannot be used as a JSX component. 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

answered Mar 3, 2021 at 17:05

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

4 Comments

Håken Lid Over a year ago

What is the purpose of the function chooseRegularTileByEntity?

Milos Over a year ago

@HåkenLid it's returning the component based on props

Håken Lid Over a year ago

Why do it so complicated? It seems this could be a single line instead.

const SuperTileSummary = props => props.tileEntity === 'EmailCampaign' ? <ECOTileSummary {...props} /> : <TileSummary {...props} />

. How did you come up with switch (tileEntity && tileEntity)? What is the reason for using && here?

Milos Over a year ago

Because I plan to have more components in this switch, not only these two

Collectives™ on Stack Overflow

Component cannot be used as a JSX component

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related