IonTabs does not show at first render

The problem I have is that Tabs, element containing is not displayed the first time the component is rendered. If instead it is shown when I return the Elements component.

Consider that at the moment tabs does nothing because it is part of the design at the current stage

    return (
      <div id="container-principal-ExplorerContainer-Cliente">   
        <Tabs setShowModal={props.setShowModal} setTipoDeVistaEnModal={props.setTipoDeVistaEnModal} ></Tabs>
        <IonTitle id="explorerContainerCliente-titulo">PROVEEDORES DE SERVICIOS EN LA ZONA </IonTitle>             
        <Elements  arrangement={props.arreglo!} setVerEmail={setVerEmail} setItem={setItem}  />
      </div>
      );

const Tabs= (props:{setShowModal:any,setTipoDeVistaEnModal:any }) => {

  return(
    <>
    
    <IonReactRouter>

    <IonTabs>

        <IonRouterOutlet>
          <Route exact path="/">
          </Route>
          <Route exact path="/">
            <Tab2 />
          </Route>
          <Route path="/">
          </Route>
          <Route exact path="/">
            <Redirect to="/" />
          </Route>
        </IonRouterOutlet>

        <IonTabBar slot="top">

          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon icon={triangle} />
            <IonLabel>CATEGORÍAS</IonLabel>
          </IonTabButton>
          
          <IonTabButton tab="tab2" href="/tab2">
            <img className="imagen-boton-principal" src={"./assets/icon/sirena.png"} />
            <IonLabel>EMERGENCIAS</IonLabel>
          </IonTabButton>

          <IonTabButton tab="tab3" href="/tab3">
          <img className="imagen-boton-principal" src={"./assets/icon/time.png"} />
            <IonLabel>PROGRAMAR</IonLabel>
          </IonTabButton>
       
        </IonTabBar>
      </IonTabs>
      </IonReactRouter>
      </>
  )
}

1 post - 1 participant

Read full topic