in

Component cannot be used as a JSX component. Its return type ‘Element | undefined’ is not a valid JSX element


I am trying to render my <Reports/> Component inside of another component, But I am getting this error:

‘Reports’ cannot be used as a JSX component. Its return type ‘Element | undefined’ is not a valid JSX element.

My Reports component intent is to return a component based on the state of the parent component. Here is how my reports component looks:

import React from "react";
import { GroupedOrder } from "../../components/Relatorios/PedidoAgrupado";
import { SalesOrder } from "../../components/Relatorios/PedidoDeVenda";
import { OrderSumarry } from "../../components/Relatorios/PedidoResumido";
import { Management } from "../../components/Relatorios/SaidaEstoque";

interface Props {
  typeOfReport: string;
  data: any;
}

export const Reports = ({ typeOfReport, data }: Props) => {
  switch (typeOfReport) {
    case "Sales Order":
      return <SalesOrder data={data} />;
    case "Report":
      return <SalesOrder data={data} />;
    case "Grouped Order":
      return <GroupedOrder data={data} />;
    case "Management":
      return <Management data={data} />;
    case "Order Summary":
      return <OrderSummary data={data} />;
  }
};



Source: https://stackoverflow.com/questions/70609139/component-cannot-be-used-as-a-jsx-component-its-return-type-element-undefine

Building a Cupertino App with Flutter

TikTok couple goes viral after finding a clever way to survive I-95 traffic jam