Add Sweet Alert popup to button in React component

Question

I found this perfect Sweet Alert module for Bootstrap and React (which I'm using in my Meteor app):

http://djorg83.github.io/react-bootstrap-sweetalert/

But I don't understand how you include this code inside a React component.

When someone clicks the Delete button in my app, I'd like a Sweet Alert prompt to pop up asking for confirmation.

Here is my component for the Delete button:

import React, {Component} from 'react';
import Goals from '/imports/collections/goals/goals.js'
import SweetAlert from 'react-bootstrap-sweetalert';

export default class DeleteGoalButton extends Component {

  deleteThisGoal(){
    console.log('Goal deleted!');
    // Meteor.call('goals.remove', this.props.goalId);
  }

  render(){
    return(
      <div className="inline">
          <a onClick={this.deleteThisGoal()} href={`/students/${this.props.studentId}/}`}
          className='btn btn-danger'><i className="fa fa-trash" aria-hidden="true"></i> Delete Goal</a>
      </div>
    )
  }
}

And here is the code that I copied from the Sweet Alert example:

<SweetAlert
    warning
    showCancel
    confirmBtnText="Yes, delete it!"
    confirmBtnBsStyle="danger"
    cancelBtnBsStyle="default"
    title="Are you sure?"
    onConfirm={this.deleteFile}
    onCancel={this.cancelDelete}
>
    You will not be able to recover this imaginary file!
</SweetAlert>

Anyone know how to do this?

score 16 · Accepted Answer · answered Dec 06 '16 at 22:49

16

Working example based on your code http://www.webpackbin.com/VJTK2XgQM

You should use this.setState() and create <SweetAlert ... /> on onClick. You can use fat arrows or .bind() or any other method to be sure that proper context is used.

import React, {Component} from 'react';
import SweetAlert from 'react-bootstrap-sweetalert';

export default class HelloWorld extends Component {

  constructor(props) {
    super(props);

    this.state = {
      alert: null
    };
  } 

  deleteThisGoal() {
    const getAlert = () => (
      <SweetAlert 
        success 
        title="Woot!" 
        onConfirm={() => this.hideAlert()}
      >
        Hello world!
      </SweetAlert>
    );

    this.setState({
      alert: getAlert()
    });
  }

  hideAlert() {
    console.log('Hiding alert...');
    this.setState({
      alert: null
    });
  }

  render() {
    return (
      <div style={{ padding: '20px' }}>
          <a 
            onClick={() => this.deleteThisGoal()}
            className='btn btn-danger'
          >
            <i className="fa fa-trash" aria-hidden="true"></i> Delete Goal
        </a>
        {this.state.alert}
      </div>
    );
  }
}

answered Dec 06 '16 at 22:49

Dawid Karabin

5,113
1
23
31

1

This worked perfectly! Thank you for the quick and thorough response, @hinok Much appreciated! – Jordan England-Nelson Dec 07 '16 at 22:20
@hinok how can i parsing messsage by variabe there, i just put variable and got an error – Freddy Sidauruk Jan 25 '18 at 10:16
@FreddySidauruk What variable and where you'd like to use it? Where do you want to pass it? – Dawid Karabin Jan 25 '18 at 13:31
@hinok how can you use this with Redux? Does this work with props? I want to use it as a callback from my action creator. – Juanjo Jul 03 '18 at 16:48
@Juanjo You should put only serializable data in redux store so regular boolean flag should work in such case. Dispatch an action that set property like `showAlert` to `true` and in your `connected component`, take `showAlert` from redux store and display `SweetAlert` using condition in `JSX`. – Dawid Karabin Jul 03 '18 at 21:05
@hinok I used this code and it works. The only problem is buttons appear as grey no matter how I change `confirmBtnBsStyle`. Any idea why I can't change style of buttons? – Mustafa Chelik Oct 30 '18 at 00:31
@MustafaChelik Your problem seems strictly related to CSS / styles issue and it's hard to help in such case, without knowing how styles as a part of your application is built. – Dawid Karabin Oct 30 '18 at 12:44
@hinok `import "bootstrap/dist/css/bootstrap.min.css";` solved my problem. Thank you – Mustafa Chelik Oct 30 '18 at 14:03

score 3 · Answer 2 · answered Apr 26 '18 at 04:29

if it doesn't work for someone the way you exposed the @hinok solution then you can modify this function like this:

deleteThisGoal() {    
this.setState({
    alert: ( <
        SweetAlert success title = "Woot!"
        onConfirm = {
            () => this.hideAlert()
        } >
        Hello world!
        <
        /SweetAlert>
    )
});

};

This was the code that I wrote:

showAlert(title, message, callBack, style) {
    this.setState({
        alert: (
            <SweetAlert 
                warning
                showCancel
                confirmBtnText = "Sí"
                cancelBtnText = "No"
                confirmBtnBsStyle= {style ? style : "warning"}
                cancelBtnBsStyle = "default"
                customIcon = "thumbs-up.jpg"
                title = {title}
                onConfirm = {callBack()}
                onCancel = {this.hideAlert}
            >
                {message}
            </SweetAlert>
        )            
    });
}

hideAlert = () => {
    this.setState({
        alert: null
    });
}

updateCustomer = () => {..."a few lines of code here"}

This was the called from button:

{<Button color="primary" disabled={this.state.notChange} onClick={() => this.showAlert('Save changes for client', '¿Are you sure?', () => this.updateCustomer, null) } >Save changes</Button>}

Saludos!!

Add Sweet Alert popup to button in React component

2 Answers2

Linked