React Componet - Element | undefined

Question

Implementing an Ionic Modal as a React Component I got this message:

Type '({ onClose, tipo }: PropsWithChildren<{ onClose: any; tipo: number; }>) => Element | undefined' is not assignable to type 'FC<{ onClose: any; tipo: number; }>'. Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'. Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)

I don't see the problem because the component returns elements. So it is not a function return problem.

This is the code in question.

const MyModal: React.FC<{ onClose: any; tipo: number }> = ({
  onClose,
  tipo
}) => {
  if (tipo === 0) {
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonIcon
              icon={arrowBack}
              onClick={() => onClose(null)}
              slot="start"
              id="flecha-volver"
            >
              {" "}
            </IonIcon>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <div id="contenedor-central">
            <IonGrid>
              <IonRow>
                <strong id="elementos">Usuario no registrado</strong>
              </IonRow>
              <IonRow>
                <IonButton href="/registro" id="elementos">
                  Registrarse
                </IonButton>
              </IonRow>
            </IonGrid>
          </div>
        </IonContent>
      </>
    );
  }
  if (tipo === 1) {
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonIcon
              icon={arrowBack}
              onClick={() => onClose(null)}
              slot="start"
              id="flecha-volver"
            ></IonIcon>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <div id="contenedor-central">
            <strong>Usuario no registrado</strong>
          </div>
          <IonButton href="/registro">Registrarse</IonButton>
          <IonItem>Click List Item To Return Selected Value</IonItem>
        </IonContent>
      </>
    );
  }
  if (tipo === 2) {
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonIcon
              icon={arrowBack}
              onClick={() => onClose(null)}
              slot="start"
              id="flecha-volver"
            >
              {" "}
            </IonIcon>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <div id="contenedor-central">
            <IonGrid>
              <IonRow>
                <strong id="elementos">Categorías</strong>
              </IonRow>
              <IonRow>
                <IonButton href="/registro" id="elementos">
                  Registrarse
                </IonButton>
              </IonRow>
            </IonGrid>
          </div>
        </IonContent>
      </>
    );
  }
};

and what does it return if `tipo` isn't 0, 1 or 2? – Robin Zigmond Nov 19 '20 at 21:56 — Robin Zigmond, Nov 19 '20 at 21:56

score 0 · Answer 1 · answered Nov 19 '20 at 23:33

0

if typo has only three possible values define it like so

type Typo = 1 | 2 | 3;
const MyModal: React.FC<{onClose: any; tipo: Typo;}>

Your error must vanish :)

answered Nov 19 '20 at 23:33

Wonkledge

1,732
7
16

React Componet - Element | undefined

1 Answers1