title: React Bootstrap SweetAlert in React js not working
body: <p>I am trying to create a logout button with <code>sweetalert</code>. I created a logout function, and it worked perfectly without <code>sweetalert</code>. But when I add the <code>sweetalert</code> button it stops working.</p>
  <p>Here is my code. please help me...</p>
  <pre><code>import React, {Component } from 'react';
  import SweetAlert from 'react-bootstrap-sweetalert';
  
  class Hero extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              alert: null
          };
      }  
  
      showAlert = () =&gt; (
              this.setState = ({
                  alert: (
                      &lt;SweetAlert
                      title=&quot;Here's a message!&quot;
                      onConfirm={this.props.handleLogout}
                      onCancel={this.onCancel}
                      showCancel={true}
                      focusCancelBtn={true}
                      /&gt;
                  )
              })
              
          );
  
      render(){
          return (
              &lt;section className = &quot;hero&quot;&gt;
                  &lt;nav&gt;
                      &lt;h2&gt;Book Exchange&lt;/h2&gt;
                      &lt;button onClick = {() =&gt; this.showAlert()}&gt;Logout&lt;/button&gt;
                  &lt;/nav&gt;
              &lt;/section&gt;
          );
      }
  };
  export default Hero;
  </code></pre>
  <p>My <code>handleLogout</code> function is below and it worked perfectly without <code>sweetalert</code>. I am using firebase for auth.</p>
  <pre><code>const handleLogout = () =&gt; {
    fire.auth().signOut()
  };
  </code></pre>