Ionic Menu does not show

Ionic Framework Ionic React
1

Hello.

I try to implements a Menu as this tutorial shows:

But there the menu has an IonContent and there must be just one IionContent

const Registro: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
      <IonToolbar>
        <IonGrid>
          <IonRow>
            <IonCol><MenuPrincipal></MenuPrincipal></IonCol>
            <IonCol><Busqueda></Busqueda></IonCol>
            <IonCol><p>OtherThing</p></IonCol>
          </IonRow>
        </IonGrid>
      </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <RegistroNuevaCuenta></RegistroNuevaCuenta>
      </IonContent>
    </IonPage>
  );
};

And this is the menu element:

class MenuPrincipal extends Component{
  render(){
    return (
<IonMenu side="end" type="push">

  <IonList>
    <IonItem>Menu Item</IonItem>
    <IonItem>Menu Item</IonItem>
    <IonItem>Menu Item</IonItem>
    <IonItem>Menu Item</IonItem>
    <IonItem>Menu Item</IonItem>
  </IonList>

</IonMenu>
    );
  }
};

But the menu icon does not show. Why that?

    <IonMenu side="start" menuId="first">
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
          <IonItem>Menu Item</IonItem>
        </IonList>
      </IonContent>
    </IonMenu>

That’s the menu example and there is IonContent but with that it does not show the menu icon neither.

2

Menu does not work nested. It needs to be higher up in the component hierarchy.

See the official sidemenu starter for an example of this: https://github.com/ionic-team/starters/blob/49dcd41ccbbb2fd4b44b5bd821006a164bf71dba/react/official/sidemenu/src/App.tsx