useIonModal(): How to pass the data to the Modal?

Hi all,

I want to use useIonModal() hook to show a modal according what I clicked.

For example, I have a list of students on a page, if I click a student’s name, then it will show me the detailed information about this student. so I use the useIonModal() hook, but I can’t figure out, how to pass the data to the modal. Hier is my way, I thought, it should work, but it is wrong…

You can also try the sandbox here:

What I want to do is simply, click Tom, then it popup “age: 16”; click “Jerry”, then popup “age: 12”.

So the question is how to pass the clicked item (“Tom” or “Jerry”) to the Modal…

// Home.tsx
const sourceData = [
  { name: "Tom", age: 16 },
  { name: "Jerry", age: 12 },

type TItem = {
  name: string
  age: number

const Home: React.FC = () => {
  const [currentLineItem, setCurrentLineItem] = useState<TItem>()

  const handleDismiss = () => {

  const [present, dismiss] = useIonModal(LineItemModal, {
    LineItem: currentLineItem,
    onDismiss: handleDismiss,

  const onEdithandler = (item: TItem) => {

  return (
          <IonTitle>Test useModal Hook</IonTitle>
      <IonContent fullscreen className="ion-padding">
        { => (
          <IonRow key={}>
            <IonCol>name: {}</IonCol>
              <IonButton onClick={() => onEdithandler(item)}>
                Click Me

export default Home

type Props = {
  lineItem: TItem
  onDismiss: () => void
const LineItemModal: React.FC<Props> = ({ lineItem, onDismiss }) => {
  return (
    <IonContent className="ion-padding">
      <IonRow>age: {lineItem?.age}</IonRow>
      <IonButton onClick={onDismiss}>close</IonButton>

Thanks very much for the help!

you had some spelling errors

  const [present, dismiss] = useIonModal(LineItemModal, {
    lineItem: { ...currentLineItem },
    onDismiss: handleDismiss

see here - test-useModalHook (forked) - CodeSandbox

1 Like

Hi Aaron,

Thanks, Aaron!!! You are so cool! :grin: :+1:

I wasted a whole day didn’t figured it out°°°° :sweat_smile:

1 Like

glad we got you moving forward !!

1 Like