Show a modal depending on a variable

Ionic Framework Ionic React
1

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

When I press a button to open a modal I got:

Tipo at modal argument is undefined

import * as React from "react";
import { useState } from "react";
import {
  IonApp,
  IonPage,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButton,
  IonModal,
  IonContent,
  IonList,
  IonItem
} from "@ionic/react";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";

import "/App.css";

const App = () => {
  const [showModal, setShowModal] = useState({ isOpen: false });
  const [retVal, setRetVal] = useState(null);
  const [count, setCount] = useState(null)
 
  return (
    <IonApp>
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonButton onClick={() => {  setShowModal({ isOpen: true});  setCount(0)}}              
            slot="end"
            
            >
              OPEN MODAL 1
            </IonButton>
            <IonButton onClick={() => {  setShowModal({ isOpen: true});  setCount(1)}}              
            slot="end"
            >
              OPEN MODAL 2
            </IonButton>
            <IonTitle>MODAL TEST</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding">
          <IonModal
            animated={true}
            isOpen={showModal.isOpen}
            onDidDismiss={() => setShowModal({ isOpen: false })}
          >
            <MyModal tipo={count}
              onClose={(value) => {
                setShowModal({ isOpen: false });
                value ? setRetVal(value) : setRetVal("User Cancelled");
              }}
            />
          </IonModal>
          <h2>Test Modal</h2>
          <li>Modal in seperate component</li>
          <li>Modal with List</li>
          <li>Modal That Scrolls</li>
          <li>Modal That returns Value When Clicked</li>
          <div>
            <h3>RETURNED VALUE</h3>
            <p>{retVal}</p>
          </div>
        </IonContent>
      </IonPage>
    </IonApp>
  );
};

export default App;

const MyModal = ({ onClose }, {tipo}) => {
  const data = Array(100).fill("TEST");
  console.log(tipo)
  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>
      </>
    );
  }

  else{
    return (
      <>
        <IonHeader>
          <IonToolbar>
            <IonButton onClick={() => onClose(null)} slot="end">
              CLOSE MODAL
            </IonButton>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <div id="contenedor-central">
            <strong>Tipo 2</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>
      </>
    );
  }
  
};
2

Should be

const MyModal = ({ onClose, tipo}) => {

1 Like
3

thanks

whit this code:

const MyModal = ({ onClose, tipo}) => {

I get:
Binding element ‘onClose’ implicitly has an ‘any’ type.ts(7031)

   <MyModal 
               tipo={count}
              onClose={(value: React.SetStateAction<null>) => {
                setShowModal({ isOpen: false });
                value ? setRetVal(value) : setRetVal(null);
              }}

Type ‘{ tipo: number; onClose: (value: SetStateAction) => void; }’ is not assignable to type ‘IntrinsicAttributes & { onClose: any; }’.
Property ‘tipo’ does not exist on type ‘IntrinsicAttributes & { onClose: any; }’.ts(2322)

and this is the modal component:

const MyModal = ( {onClose} : { onClose: any}, tipo: number) => {
  
  if(tipo===0){
    return (
/* 
some code
*/
);
}
4

Should be this

const MyModal: React.FC<{
  onClose: any;
  tipo: number;
}> = ({ onClose, tipo }) => {}
1 Like
5

@aaronksaunders

const MyModal: React.FC<{
onClose: any;
tipo: number;
}> = ({ onClose, tipo }) => {}

I had tried to perform with that notation but got the following

const MyModal: React.FC<{
    onClose: any;
    tipo: number;
}>
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)