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

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:

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


What does your code look like?

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 (
      <IonButton onClick={() => setShowToast1(true)} expand="block">Show Toast 1</IonButton>
      <IonButton onClick={() => setShowToast2(true)} expand="block">Show Toast 2</IonButton>
        onDidDismiss={() => setShowToast1(false)}
        message="Your settings have been saved."

        onDidDismiss={() => setShowToast2(false)}
        message="Click to Close"
            side: 'start',
            icon: 'star',
            text: 'Favorite',
            handler: () => {
              console.log('Favorite clicked');
            text: 'Done',
            role: 'cancel',
            handler: () => {
              console.log('Cancel clicked');

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

Thanks - I’ve submitted an issue:

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

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.

They are now individual imports from @ionic/react

Yes - but that hasn’t changed from 4.11.3.