Ionic/React - I can only get one slice of Toast

Ionic Framework
1

I hope this category is okay - I couldn’t see one for ionic/react.

I’m trying to use Ionic toast notifications in a React app (ionic/react 4.11.3), but can only get them to display once.

I see exactly the same problem if I implement the React example shown here: https://ionicframework.com/docs/api/toast

Click a button and a toast appears. But after it’s gone, clicking the button again has no effect - the toast does not reappear.

Rich

2

What does your code look like?

3

Hello. I get the problem with this code straight from the api page:

import React, { useState } from 'react';
import { IonToast, IonContent, IonButton } from '@ionic/react';

export const ToastExample: React.FC = () => {
  const [showToast1, setShowToast1] = useState(false);
  const [showToast2, setShowToast2] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowToast1(true)} expand="block">Show Toast 1</IonButton>
      <IonButton onClick={() => setShowToast2(true)} expand="block">Show Toast 2</IonButton>
      <IonToast
        isOpen={showToast1}
        onDidDismiss={() => setShowToast1(false)}
        message="Your settings have been saved."
        duration={200}
      />

      <IonToast
        isOpen={showToast2}
        onDidDismiss={() => setShowToast2(false)}
        message="Click to Close"
        position="top"
        buttons={[
          {
            side: 'start',
            icon: 'star',
            text: 'Favorite',
            handler: () => {
              console.log('Favorite clicked');
            }
          },
          {
            text: 'Done',
            role: 'cancel',
            handler: () => {
              console.log('Cancel clicked');
            }
          }
        ]}
      />
    </IonContent>
  );
};
4

I’m having the same result on the latest CLI and framework. Looks like a bug

5

Thanks - I’ve submitted an issue: https://github.com/ionic-team/ionic/issues/19823

6

Looks like the latest release now fixes this
Update package.json to

'@ionic/angular': '^4.11.4'

then run $ npm install in the project directory

I haven’t tested it but the changelog says it’s taken care of

7

Yes it sorted the toast problem. Unfortunately it seems to have introduced some new problems around ionic/react lifecycle methods which I haven’t had time to get to the bottom of yet.

8

They are now individual imports from @ionic/react

9

Yes - but that hasn’t changed from 4.11.3.