Member-only story
How To Build a Modal With Ionic and React
How to declare and pass parameters to an Ionic + React modal

I’m having fun with Ionic React these days and am, therefore, experimenting with different components.
One of these, which I use almost without exception in all applications, is the modal.
Although its dedicated documentation is pretty neat, I went a bit further, as I like to declare them in their own separate components. That’s why I’m writing this new blog post.
Getting Started
To add a modal to an application, we proceed as displayed in the documentation (told you, it is well-documented).
We use the component IonModal
and, to trigger its opening and closing, we also use a state (with the help of a useState
Hook) to modify its property isOpen
.
import React, { useState } from 'react';
import { IonModal, IonButton, IonContent } from '@ionic/react';
export const Tab1: React.FC = () => {
const [showModal, setShowModal] = useState(false);
return (
<IonContent>
<IonModal isOpen={showModal}>
<p>This is the modal content.</p>
<IonButton onClick={() => setShowModal(false)}>
Close Modal
</IonButton>
</IonModal>
<IonButton onClick={() => setShowModal(true)}>…