# Programmatically calling out an alert doesn't work in Ionic 6 React

**URL:** <https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124>\
**Category:** Ionic React\
**Created:** [February 4, 2022, 10:31am UTC](https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124 "2022-02-04T10:31:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kazlauskis](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/kazlauskis/32/134293_2.png) [@kazlauskis](https://forum.ionicframework.com/u/kazlauskis)\
**Post date:** [February 4, 2022, 10:31am UTC](https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124/1 "2022-02-04T10:31:23Z")

</div>

In some cases we don’t want to use hooks or JSX to invoke an alert (or toast, loading etc). Using plain JS used to work in Ionic 5 but it stays hidden in the new version (including the official starter templates). Is there anything we could do to fix this?

```auto
  const alert = document.createElement('ion-alert');
  alert.header = 'Alert';

  document.body.appendChild(alert);
  alert.present();

```

Cheers

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [February 4, 2022, 3:47pm UTC](https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124/2 "2022-02-04T15:47:51Z")

</div>

Hey there! I’m not really sure what the use case is here… If hooks are not your thing… there are the overlay components you can use inline

> **[Using Overlay Components in React | Ionic Documentation](https://ionicframework.com/docs/react/overlays#overlay-components)**
>
> For Ionic React, there are two techniques you can use to display overlay components like modals, alerts, action sheets, etc. In this guide, we will go over both of them.

But I guess to better answer your question, Ionic-React changed how components were bundled internally, so this makes sense. I would not recommend manually adding them to the DOM the way you are trying.

---

<div class="post-metadata">

**Author:** ![kazlauskis](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/kazlauskis/32/134293_2.png) [@kazlauskis](https://forum.ionicframework.com/u/kazlauskis)\
**Post date:** [February 7, 2022, 7:31am UTC](https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124/3 "2022-02-07T07:31:31Z")

</div>

I see, thanks. It is useful to be able to invoke an alert (or some other overlay item) in a function outside the React context. That is, without having to pass down the hook function as a dependency. We have some helper functions that are bundled as separate libraries and whilst before we could just invoke the alerts using vanilla JS, now it requires passing down the hook, sometimes multiple functions down to call it.

This used to work fine in Ionic 4/5 and it looks like it is mostly working for alerts in the v6 so I hoped it could be fixed.

Also, the way I view it, we should be able to revert to using plain JS for any Ionic components regardless of which framework is in use.

Thanks

---

<div class="post-metadata">

**Author:** ![szpeter80](https://avatars.discourse-cdn.com/v4/letter/s/b9bd4f/32.png) [@szpeter80](https://forum.ionicframework.com/u/szpeter80)\
**Post date:** [February 12, 2022, 8:56pm UTC](https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124/4 "2022-02-12T20:56:27Z")

</div>

In this Solidsail tutorial, a similar method is used to invoke an app-wide toast helper (for example displaying form validation errors):

Toast helper:

> <https://github.com/solidsail/Newsy/blob/057b83ce0a577b9ab7b90874791b83372b4b7cc7/src/helpers/toast.js>

Invocation (line 17):

> <https://github.com/solidsail/Newsy/blob/057b83ce0a577b9ab7b90874791b83372b4b7cc7/src/hooks/useForm.js#L17>

With current Ionic, the code used in the tutorial gives me an error:

```auto
"Uncaught (in promise) TypeError: wrapperEl is null"

```

in `mdEnterAnimation` at ` overlays.js:3813`

What would be the correct way to implement the toast helper in current React / Ionic 6 ?

---

<div class="post-metadata">

**Author:** ![Osademe-e](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/osademe-e/32/135016_2.png) [@Osademe-e](https://forum.ionicframework.com/u/Osademe-e)\
**Post date:** [May 25, 2022, 10:22pm UTC](https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124/5 "2022-05-25T22:22:06Z")

</div>

Very true! I used a helper lib in my project to programmatically call the toast, I just upgraded to v6 and now the toast doesn’t work using the JS format. 🤦🏽‍♂️ Now i have to re-write all toast using components.

---

<div class="post-metadata">

**Author:** ![aaronksaunders](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/aaronksaunders/32/13729_2.png) [@aaronksaunders](https://forum.ionicframework.com/u/aaronksaunders)\
**Post date:** [May 26, 2022, 12:14am UTC](https://forum.ionicframework.com/t/programmatically-calling-out-an-alert-doesnt-work-in-ionic-6-react/220124/6 "2022-05-26T00:14:08Z")

</div>

There is a difference between an alert and toast… if you have a specific problem maybe if you are looking for help you should post and new question to the forum