How to open Materialize confirmation modal when deleting something from a database - reactjs

Question

Currently, I have a view which shows all documents from the database.
Each one has a button which triggers the document to be deleted from the database.
Ideally, I'd like to open a modal message (using Materialize) to ensure deletion should happen.
I know that I can have a modal for each of the elements but that seems redundant and too much to add. I'd like the flow to go from:
button -> delete
to:
button -> confirm -> delete
I'd like this to happen by changing the onClick of the button to open a modal and be able to pass the action of the confirm button through
The button code currently looks like:
<button
className="btn"
onClick={() => {handleClick(category._id);}}
>
Delete
</button>
The current onClick handler for each button is the following:
const handleClick = id => {
this.props.deleteCategory(id);
};
I'm new to React/Redux and Materialize so any help would be appreciated and if any more information is required, please let me know :)
Thanks,
James

Answer 1

Okay, so I found the solution myself and since I couldn't find much else online on how to do this, I thought I'd share the solution too.
So, I installed react-materialize first and created a component to hold the modal and render the modal.
I replaced the button click function with a function which updates the state of the current component like so:
const handleClick = category => {
this.setState({
categoryClicked: category,
modalOpen: true
});
};
I then tied the component containing the model to this state using props like so:
<ConfirmDeletion
onClickYes={null}
onClickNo={null}
name={this.state.categoryClicked.name}
open={this.state.modalOpen}
actions={[
<button
onClick={modalNo}
className="modal-close waves-effect waves-green btn-flat"
>
No
</button>,
<button
onClick={modalYes}
className="modal-close waves-effect waves-green btn-flat"
>
Yes
</button>
]}
/>
Note that the actions are a list of JSX elements which should be the buttons on the modal.
I also created the click event handlers to update the state (and remove from the database in the "yes" case) as follows:
const modalYes = () => {
this.props.deleteCategory(this.state.categoryClicked._id);
this.setState({
modalOpen: false
});
};
const modalNo = () => {
this.setState({
modalOpen: false
});
};
and just for completeness, here's the component wrapping the modal in case it's useful to anyone in the future:
import React, { Component } from "react";
import { Modal } from "react-materialize";
class ConfirmDeletion extends Component {
render() {
const { name, open, actions } = this.props;
return (
<Modal
id="confirmDeletion"
open={open}
actions={actions}
header="Are you sure?"
>
<div className="modal-content">
<p>
Are you sure you want to do delete '{name}'? It cannot be undone.
</p>
</div>
</Modal>
);
}
}
export default ConfirmDeletion;

Answer 2

Based on Materialize Documentation you should follow these steps :
1- Create your modal structure. for example :
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
2- Initialize the modal :
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
});
Note: remove options if you don't want to add modal options. If don't it causes an error.
3- Change handleClick function to open modal :
const handleClick => {
//var elem = get modal element here
var instance = M.Modal.getInstance(elem);
instance.open();
};
4- Finally, call a function when user click on agree to delete the category. You can add disagree button to close modal with :
instance.close();