Using Ionic controllers with React

Ionic Framework Ionic React
1

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;
1 Like
2

what is missing from the official documentation?

3

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.

4

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>
  );
};
5

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.

6

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 !

1 Like