CODEWITHSUNDEEP
reactjssweetalert
David Díaz
David Díaz

Reputation: 119

How to render SweetAlert React

I'm trying to use SweetAlert as an alert when the user clicks the logout button. This is how I'm doing it. The SweetAlert (example copied from their repo):

const signOutUser = () => {
return (
    <SweetAlert
        warning
        showCancel
        confirmBtnText="Yes, delete it!"
        confirmBtnBsStyle="danger"
        title="Are you sure?"
        onConfirm={() => console.log('hey')}
        onCancel={() => console.log('bye')}
        focusCancelBtn
    >
        You will not be able to recover this imaginary file!
    </SweetAlert>
)}

And this is how I'm trying to call it:

const Border = () => (
    ...
    <a onClick={signOutUser}/>
    ...
)

The problem is that when I click it nothing happens. Any ideas?

Upvotes: 1

Views: 3802

Answers (3)

Luke Storry
Luke Storry

Reputation: 6702

You can't pass a component into an onclick like that.

Read this docs page about Conditional Rendering.

You can get the button to update a state variable, and then conditionally render the alert component dependant upon the value of that state variable.

Here's an example (using a red div, but sub that in for a SweetAlert):

const SignOutUser = () => (
  <div style={{ backgroundColor: "red" }}>
    You will not be able to recover this imaginary file!
  </div>
);


const App = () => {

  const [showAlert, setShowAlert] = React.useState(true)
  
  return (
    <div className="App">
    
      <button onClick={() => setShowAlert(false)}>Click Me</button>
      
      {!showAlert && <SignOutUser/>}
      
    </div>
  );
}



ReactDOM.render( <App /> , document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Upvotes: 1

Олег Войтинський
Олег Войтинський

Reputation: 801

According to documentation SweetAlert component has a show prop

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

    // ...

    render() {
    return (
    <div>
      <button onClick={() => this.setState({ show: true })}>Alert</button>
      <SweetAlert
        show={this.state.show}
        title="Demo"
        text="SweetAlert in React"
        onConfirm={() => this.setState({ show: false })}
      />
    </div>
  );
}

so you need to pass a boolean value to that prop and toggle it

Upvotes: 2

Constantin
Constantin

Reputation: 915

Your SweetAlert component needs to always be rendered (except specific cases). What triggers the SweetAlert is the show prop, which is a Boolean.

You can bind the show prop to a state of your component. Let me show you an example:

export default function YourAlert() {
  const [isOpen, setOpen] = useState(false);

  return (
    <SweetAlert
      warning
      showCancel
      show={isOpen} //Notice how we bind the show property to our component state
      confirmBtnText="Yes, delete it!"
      confirmBtnBsStyle="danger"
      title="Are you sure?"
      onConfirm={() => console.log("hey")}
      onCancel={() => {
        console.log("bye");
        setOpen(false); // Don't forget to close the modal
      }}
      focusCancelBtn
    >
      You will not be able to recover this imaginary file!
    </SweetAlert>

    <Button
        onClick={()=>{
            setOpen(true); // Open the modal
        }}
    >Open the alert</Button>
  );
}

Pay attention to where I commented, as it will make you understand the implementation.

Upvotes: 2

Related Questions