Make a Confirmation Modal using React & Redux
You have to create a Component called Dialog that opens when the deleteProfile method is called and put two buttons, one for canceling and the other for delete, when the delete button is pressed you call the deleting code. I recommend you to use some library like material-ui. This library has multiple useful and very good looking components that you can utilize. For this case in specific I recommend you the Dialog component. You can use it like this:
<Dialog
open={dialogOpen}
onClose={dialogClose}
>
<DialogContent>
Are you Sure? Your account would be permanently lost
</DialogContent>
<DialogActions>
<Button>Cancel</Button>
<Button onClick={deleteMethod}>Delete</Button>
</DialogActions>
</Dialog>
Where dialogOpen
is either a boolean component state or a redux state when is true, the Dialog will open; and dialogClose
is a method where you will change the dialogOpen
state to false to the Dialog to close.
Now as you can check you have the deleteMethod
where all you deleting code will be. You call this code when the delete button is pressed.
For open the Dialog asynchronusly what you can do is put and await once you set dialogOpen
variable, something like this:
await this.setState({dialogOpen: true});
or if you want inside an async method like this:
const method = async () =>{
await this.setState({dialogOpen: true});
}
And you just have to call the method like this:
await method();
I hope this helps!