[SOLVED] Add Sweet Alert popup to button in React component

help
1

I found this perfect Sweet Alert module for Bootstrap and React.

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

But I don’t understand how you place this code inside a React component. No where in the docs/tutorials does anyone explain how you activate the alerts, i.e. when you click the Delete button in your app, how do you get a Sweet Alert prompt to pop up asking for confirmation?

Thanks!

2

Sweet Alert in itself is a component… In their example

<SweetAlert title="Here's a message!" onConfirm={this.onConfirm}>
It's pretty, isn't it?
</SweetAlert>

So, I think you can place your logic here this.onConfirm function

1 Like
3

If you look at the demo-code, on line 585 they render {this.state.alert}. Initially this.state.alert is empty, so no alert. When you click one of the buttons, they push a SweetAlert-component to the state( this.setstate({alert: <SweetAlert ... />})), which triggers a rerender, now with a alert. And to get rid off the component, they clear the state ( this.setstate({alert:null})

1 Like
4

Thank you both for the explanations. Very helpful!

I also got an excellent response on StackOverflow that includes a very clear example of how to implement:

1 Like