Show a modal depending on a variable

Hello everyone, I have implemented a Modal but I want to show something in the modal depending on which button was pressed.

We have the following IonChip that should show something in the modal.

 <IonCol id="columna3" size="2"> 
                  <IonChip onClick={() => setShowModal({ isOpen: true})} id="user" >
                    <IonIcon icon={person} id="foto-usuario"/>
                  </IonChip>

And we have the following buttons that must each show a different portion of code in the modal

 <div id="contenedor-prueba">
            <IonChip className="boton-generales">
              <IonLabel ><small>Emergencias</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/sirena.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          <IonCol>
          <div id="contenedor-prueba">
            <IonChip className="boton-generales">
              <IonLabel><small>Categorías</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/servicio.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          <IonCol>
          <div id="contenedor-prueba">
            <IonChip className="boton-generales">
              <IonLabel><small>Programado</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/time.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>

This is the main component

const Home = () => {
  const [showModal, setShowModal] = useState({ isOpen: false });
  const [retVal, setRetVal] = useState(null);
  const state = {
    tipo_modal:0
  }
  return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonGrid>
              <IonRow id="header">
                <IonCol id="columna" size="1.5"><IonButtons ><IonMenuButton /> </IonButtons></IonCol>
                <IonCol id="columna2" ><Busqueda /></IonCol>
                <IonCol id="columna3" size="2"> 
                  <IonChip onClick={() => setShowModal({ isOpen: true})} id="user" >
                    <IonIcon icon={person} id="foto-usuario"/>
                  </IonChip>
                 </IonCol>
              </IonRow>
            </IonGrid>
          </IonToolbar>
        </IonHeader>
        
        <IonContent className="ion-padding">
        <IonModal
            animated={true}
            isOpen={showModal.isOpen}
            onDidDismiss={() => setShowModal({ isOpen: false })}
          >
            <MyModal 
              onClose={(value: React.SetStateAction<null>) => {
                setShowModal({ isOpen: false });
                value ? setRetVal(value) : setRetVal(null);
              }} 

            />  
          </IonModal>

          <IonGrid>
          <IonRow>
          <IonCol>
            <div id="contenedor-prueba">
            <IonChip className="boton-generales">
              <IonLabel ><small>Emergencias</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/sirena.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          <IonCol>
          <div id="contenedor-prueba">
            <IonChip className="boton-generales">
              <IonLabel><small>Categorías</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/servicio.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          <IonCol>
          <div id="contenedor-prueba">
            <IonChip className="boton-generales">
              <IonLabel><small>Programado</small></IonLabel>
              <IonAvatar> <img src={"./assets/icon/time.png"} className="imagen-boton-principal"/></IonAvatar> 
            </IonChip>
            </div>
          </IonCol>
          </IonRow>
          </IonGrid>

          <ExploreContainer  />
        </IonContent>
      </IonPage>
  );
};

and finally the modal, which must have if () and return based on a variable, whatever you want to display based on the event that calls the modal

const MyModal = ( {onClose} : { onClose: any}) => {
  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>
    </>
  );
};

How can I do it? Thanks in advance

Can I do something like this:

const MyModal = ({ onClose }, {tipo:any}) => {
  const data = Array(100).fill("TEST");
  if(tipo==0){
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonButton onClick={() => onClose(null)} slot="end">
              CLOSE MODAL
            </IonButton>
          </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>
          <IonList>
            {data.map((e, i) => {
              return <IonItem onClick={() => onClose(i)}>{e + i}</IonItem>;
            })}
          </IonList>
        </IonContent>
      </>
    );
  }

  if(tipo==1){
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonButton onClick={() => onClose(null)} slot="end">
              CLOSE MODAL
            </IonButton>
          </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>
          <IonList>
            {data.map((e, i) => {
              return <IonItem onClick={() => onClose(i)}>{e + i}</IonItem>;
            })}
          </IonList>
        </IonContent>
      </>
    );
  }
  
};

1 post - 1 participant

Read full topic