Its return type 'Element | undefined' is not a valid JSX element. Type 'undefined&#03-CodePudding

I checked previous answers for this type of error but most of them regard mapping and I am not sure what I should return in this case. My error says that CorrectDataHandler' cannot be used as a JSX component. Its return type 'Element | undefined' is not a valid JSX element. Type 'undefined' is not assignable to type 'Element | null'.

My type and component look as follows:

TYPES:

// ERRORS TYPE
interface SourceType {
  pointer: string;
}
interface ErrorsType {
  details: string[];
  source: SourceType;
  title: string;
}

// DATA TYPE
export interface DataType {
  content?: string;
  filename: string;
  format: string;
  batch_id?: number;
}
// META TYPE
interface CountryCurrencyType {
  iso: string;
  name: string;
}

interface MetaType {
  country: CountryCurrencyType;
  currency: CountryCurrencyType;
  local_instrument: string;
  payout_requests?: number;
}

// DATA RESPONSE
export interface DataResponse {
  data: DataType;
  meta?: MetaType;
  errors?: ErrorsType;
}

// RESPONSE
export interface Response {
  status?: number;
  data: DataResponse;
}

COMPONENT:

{!backToUpload && data && ('data' || 'meta') in data && (
              <div className="rounded-b-lg bg-white py-10 px-6">
                {console.log(data)}
                <CorrectDataHandler data={data as DataResponse} />
                <button
                  className="inpay-button mt-10 w-full"
                  onClick={() => navigateToPayoutBatches(data.data.batch_id)}
                >
                  View batch
                </button>
                <button
                  type="submit"
                  className="inpay-button mt-4 w-full"
                  onClick={() => {
                    setBackToUpload(true);
                    resetForm();
                  }}
                >
                  Upload another batch
                </button>
              </div>
            )}

The component I render looks like this:

    import { DataResponse } from '.';

interface DataProps {
  data: DataResponse;
}
const CorrectDataHandler = ({ data }: DataProps) => {
  if (data.data && data.meta) {
    return (
      data && (
        <div>
          <div>
            Format: <span className="font-semibold">CSV</span>
          </div>
          <div>
            Name: <span className="font-semibold">{data.data.filename}</span>
          </div>
          <div>
            Type:{' '}
            <span className="font-semibold">{data.meta.local_instrument}</span>
          </div>
          <div>
            Corridor:
            <span className="ml-1 font-semibold">
              {data.meta.currency.iso} ({data.meta.currency.name}) -{' '}
              {data.meta.country.iso} ({data.meta.country.name})
            </span>
          </div>
          <div>
            Total: <span>{data.meta.payout_requests}</span>
          </div>
        </div>
      )
    );
  }
};

CodePudding user response：

Add a default condition when if fails

 if (data.data && data.meta) {
   return (
     ....
   )
  }

  return null

CodePudding user response：

You need to explicitly return null since undefined is not a valid JSX Element:-

const CorrectDataHandler = ({ data }: DataProps) => {
  if (data.data && data.meta) {
    //...
  }
  return null; // <-- add this return
};

The error message is trying to tell you that your component returns undefined sometimes, and hence cannot be rendered without fixing it.

In your specific case CorrectDataHandler will return undefined when if (data.data && data.meta) condition is not met.

In JS, an implicit undefined is returned from functions, if there isn't one explicitly provided.

// this code
function f1() {
  if (condition) {
    return 'foo';
  }
}

// is equivalent to
function f1() {
  if (condition) {
    return 'foo';
  }
  return undefined;
}