How to create a popup on click delete button with ReactJS?

Question

I want when I click on button delete, it opens a popup of confirmation. I try to use a sweetAlert , but it's not showing any popup.

popupdel method :

 popupdel() {
    swal({
      title: "Are you sure?",
      text: "Your will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonClass: "btn-danger",
      confirmButtonText: "Yes, delete it!",
      closeOnConfirm: false
    }, function() {
      swal("Deleted!", "Your imaginary file has been deleted.", "success");
    });
  }

delete method :

delete(Code) {

axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {

this.setState({ clients: clients.records });

}.bind(this));

}

<button style={btn} onClick={(Code) => this.delete(client.Code)} type="button"><i class="fa fa-trash-o"></i></button>

How can I make the popup showing on click button ?

Answer 1

Just last week I created my own React wrapper component for SweetAlert2 . (There were already some wrapper classes out there on NPM, but I didn't like the way they worked, so I made my own.) The following link is a fully-functional example of both A) my wrapper component for SweetAlert2, and B) two different ways to launch the alert based on user input.

https://stackblitz.com/edit/react-sweetalert2-wrapper

The linked example shows how you can launch the alert declaratively (eg, spell out the JSX code inside the render() function and then toggle a show variable in state), or imperatively (eg, leave a placeholder for the alert inside the render() function that is dynamically populated with null or the contents of the newly-generated alert).

Answer 2

If I'm understanding what you're trying to achieve:

1. You could create some state for the popup being shown or not. This would be a boolean.
2. Set the initial state to false.
3. Create a method that when you click the button, it toggles the state to true.
4. When the state is true, display the popup.

Then pass the method down to your button depending on your app structure.

class Example extends React.Component {
  constructor() {
      super();
      this.state = {
          isPopupShown: false
      }

     this.togglePopup = this.togglePopup.bind(this);
  }


  togglePopup() {
    this.setState(prevState => ({
      isPopupShown: !prevState.isPopupShown
    }));
  }

  render() {
    return (
      <div>
        <button onClick={ this.togglePopup }>
          toggle popup
        </button>
        { this.state.isPopupShown === true ? <div>popup shown!</div> : <div>popup hidden!</div> }
      </div>
    )
  }
}

ReactDOM.render(<Example />, document.querySelector("#app"))

Here is a jsfiddle showing how you can toggle something: http://jsfiddle.net/n5u2wwjg/100862/

Answer 3

Use confirm instead of alert or sweetAlert:

delete(Code) {
    if( confirm('Sure want to delete?')) {
        axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {

    this.setState({ clients: clients.records });
)}

else {
        // Do something..
    } }.bind(this));

    <button style={btn} onClick={(Code) => this.delete(client.Code)} type="button"><i class="fa fa-trash-o"></i></button>