title: How to show Bootstrap 5 Toast in React.js?
body: <p>Following the below approach to show <a href="https://getbootstrap.com/docs/5.0/components/toasts/#custom-content" rel="noreferrer">Bootstrap 5 Toast</a> dynamically on click of a button in React.js</p>
  <p>import statement:</p>
  <pre><code>import * as bootstrap from 'bootstrap';
  </code></pre>
  <p>Button click submit handler:</p>
  <pre><code>let toastEl = document.getElementById('myToast');
  let toast = new bootstrap.Toast(toastEl, {autohide: false});
  toast.show();
  </code></pre>
  <p>render:</p>
  <pre><code>&lt;div class=&quot;toast align-items-center&quot; id=&quot;myToast&quot; role=&quot;alert&quot; aria-live=&quot;assertive&quot; aria-atomic=&quot;true&quot;&gt;
    &lt;div class=&quot;d-flex&quot;&gt;
      &lt;div class=&quot;toast-body&quot;&gt;
      Hello, world! This is a toast message.
    &lt;/div&gt;
      &lt;button type=&quot;button&quot; class=&quot;btn-close me-2 m-auto&quot; data-bs-dismiss=&quot;toast&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;button type=&quot;button&quot; className=&quot;btn btn-primary&quot; id=&quot;showToast&quot; onClick={this.showToast}&gt;Show Toast&lt;/button&gt;
  </code></pre>
  <p>Is there any alternate method to do this in React way, as it is NOT recommended to use document.getElementById in React?
  Tried by using Ref, but Toast doesn't display.</p>