Using Ionic controllers with React

Hi,

Bit of a newbie but couldn’t find any proper example on how to properly use controller (actionsheet, modal, etc) with React.

Here is just a boilerplate but I would like to :

  • programmaticaly create a modal on elent click
  • pass any parameters so I can load the right data in the modal

Many thanks

import React from 'react';
import {IonContent,  IonPage} from '@ionic/react';

import {actionSheetController, modalController} from '@ionic/core';

class Testmodal extends React.Component<{},State> {
  constructor(props:any) {  
    super(props);
  }

  openModal(id: number){
      //Create modal with parameters 
      /* //Not working code...
       modalController.create({

      })*/
  }

  render(){  
    return ( 
        <IonPage>      
            <IonContent>  
                  <div key="1" onClick={() => this.openModal(1)}></div>
                  <div key="1" onClick={() => this.openModal(1)}></div>
                  {/* etc... */}
            </IonContent>  
        </IonPage>
    );
  }
};

export default Testmodal;

what is missing from the official documentation?

Thanks Aaron for your feedback.
I’m referring to the controllers (e.g. https://ionicframework.com/docs/api/modal-controller).
I guess I am struggling to make my openModal() functions work and to call the modalController crearte methods with the right options.

you dont need the controllers, you should just use state variables to control what parameters are passed to the modal when it is rendered.

below is a quick and dirty example that will hopefully push you in the right direction

export const ModalExample: React.FC = () => {
  const [modalInfo, setModalInfo] = useState({visible :false, msg : ""});

  return (
    <IonContent>
      <IonModal isOpen={modalInfo.visible}>
          <p>{modalInfo.msg}</p>
          <IonButton onClick={() => setModalInfo({visible:false})}>
            Close Modal
          </IonButton>
      </IonModal>
      <IonButton onClick={() => setModalInfo({visible:true, msg:"My Modal Message"})}>
        Show Modal
      </IonButton>
    </IonContent>
  );
};

Thanks but I have a list of 100 entries and I do not want to create 100 IonModal elements. Instead I would like to programatically create the modal on click via the Controller. Thanks for your help though.

Manage to make it work :

  createActionSheet(uid_user:string){
    let asc = actionSheetController.create({
      header: 'test', 
      buttons: [
        {
          text: 'Add To Favorites',
          handler: () => {
            //this.addToFavorites();
            console.log('handle:'+uid_user);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    }).then(actionsheet => {
      actionsheet.present();
    });
  }

I didn’t know that some parameters for ActionSheet where mandatory. Will be the same for Modal and any other controllers.

Thanks for your help !