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

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;