CODEWITHSUNDEEP
javascriptreactjs
Milos
Milos

Reputation: 619

Component cannot be used as a JSX component

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.

Upvotes: 2

Views: 17963

Answers (2)

lissettdm
lissettdm

Reputation: 13078

You can call chooseRegularTileByEntity function to get the returned value:

return chooseRegularTileByEntity();

or use it as component:

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

return <ChooseRegularTileByEntity />

Upvotes: 1

TKoL
TKoL

Reputation: 13892

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

Upvotes: 1

Related Questions