SweetAlert pop up not closing

[Vijayadeepak]

Hello,

I am using this wonderful sweetalert package in my project with ReactJS and when I want to close the pop up, it doesn't. The onConfirm and the onCancel doesn't seem to be working.

I have created a React Component and trying to render it. This is what it looks like:

<SweetAlert
warning
showCancel

        confirmBtnText="Yes, delete it!"
        confirmBtnBsStyle="danger"
        cancelBtnBsStyle="default"
        title="Are you sure?"
        onConfirm={this.hideAlert}
        onCancel={this.hideAlert}
        
        >
      You will not be able to undo it!
      </SweetAlert>

Unfortunately, when I click cancel or the confirm button, the sweetalert does not close.

Kindly help me with this issue. Thanks! :)

[Andrew Cordivari]

@gbkjunior did you try setting the default state and update the alert state to null after your onConfirm/onCancel function call? https://stackoverflow.com/questions/41006087/add-sweet-alert-popup-to-button-in-react-component/41006372#41006372

[Vijayadeepak]

Yes. I updated the alert state to null and it throws this error: "Uncaught TypeError: Cannot read property 'setState' of null".
Also, is it possible to call more than one function inside the onConfirm method? As in, I want to close the sweetalert and also save a particular field after the confirm button is clicked on the sweetalert.

Thanks for your help :)

[Vijayadeepak]

Now, I have rectified the error. But, the sweetalert is not hiding even after updating the alert state.

[Hedi Kasmanto]

I think you may forget to bind your hideAlert method. You have two options how to bind

1. Add bind(this) into onConfirm & onCancel e.g. : onConfirm={this.hideAlert.bind(this)}
2. Add bind(this) into your Component constructor e.g. : this.hideAlert = this.hideAlert.bind(this)

[Daniel Jorgensen]

Is this still a problem?