title: ReactJS - onClick SweetAlert is not working
body: <p>I'm using ReactJS (and nodejs, mongodb..) and I have projects with the delete option and I want to show a delete alert confirm window and I'm using SweetAlert for the first time. It shows the SweetAlert but doesn't let me choose the option, delete the project immediately. I'll show a gif so you can see what is happening.</p>
  
  <p>Thank you!</p>
  
  <p><strong>My ProjectPage Component:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { NavLink } from 'react-router-dom';
  import moment from 'moment';
  
  import SweetAlert  from 'react-bootstrap-sweetalert'
  import Tasks from '../../TaskList/Tasks/Tasks';
  
  import './ProjectPage.css';
  
  
  
  class ProjectPage extends Component {
      constructor(props) {
          super(props);
          this.state = {
              project: {},
              alert: null
          };
      }
  
      componentDidMount() {
  
          const { match: { params } } = this.props;
  
          fetch(`/dashboard/project/${params.id}`)
              .then(response =&gt; {
                  return response.json()
              }).then(project =&gt; {
                  this.setState({
                      project: project
                  })
              })
      }
  
  deleteProject(e){
      const getAlert = () =&gt; (
          &lt;SweetAlert
          warning
          showCancel
          confirmBtnText="Yes!"
          confirmBtnBsStyle="danger"
          cancelBtnBsStyle="default"
          title="Are you sure you want to delete this project?"
          onConfirm={() =&gt; this.deleteFile()}
          onCancel={() =&gt; this.onCancelDelete()}
          &gt;
          You will not be able to recover this project!
      &lt;/SweetAlert&gt;
      );
      this.setState({
          alert: getAlert()
      });
  
      e.preventDefault();
  }
  
  onCancelDelete(){
      this.setState({
          alert: null
      });
  }
  
      render() {
  
          const { match: { params } } = this.props;
  
          const BackgroundImage = {
              backgroundImage: `url(${this.state.project.imageURL})`,
              backgroundRepeat: 'no-repeat',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
              height: '350px',
              opacity: '0.7'
          }
          return (
  
       &lt;div&gt;
           &lt;header style={BackgroundImage}&gt;
   [...]
                 &lt;form method='POST' action={`/dashboard/project/${params.id}/delete?_method=DELETE`}&gt;
  
                     &lt;button id='button__project-delete' style={{ boxShadow: 'none' }} className='button__options--project btn btn-outline-secondary' 
         type='submit' onClick={() =&gt; this.deleteProject()}&gt;Delete&lt;/button&gt; {this.state.alert}
  
                 &lt;/form&gt;
  
           &lt;/header&gt;
    [...]
       &lt;/div&gt;
  
              );
      }
  }
  export default ProjectPage;
  </code></pre>
  
  <p><strong>GIF what's happening:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/b3HHf.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b3HHf.gif" alt="enter image description here"></a></p>