它的返回类型 'Element | undefined' 不是有效的 JSX 元素。 类型“undefined”不可分配给类型“Element | 无效的'

Question

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

Answer 1

Add a default condition when if fails

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

  return null

Answer 2

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