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

Questions

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

January 6, 2022

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} />;
  }
};

>Solution :

It need to have a default value in your switch case. If nothing match, it will be undefined.

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} />;
    default:
      return <SalesOrder data={data} />;
  }
};