Passing data to a modal

Question

I have so far replaced the delete button in the map() to open the modal. Now would like to pass the data of product to the new delete button inside of the modal.

How would I go about getting the data of product after using map(), and using it for the delete button in the modal?

Thank you for your help in advance.

import div, { Component } from "react";
import { Link } from "react-router-dom";
import auth from "../../services/authService";
import Like from "../common/like";
import Table from "../common/table";
import fly_1 from "../../images/fly_1.1.jpg";
import fly_2 from "../../images/fly_2.1.jpg";
import fly_3 from "../../images/fly_3.1.jpg";
import fly_4 from "../../images/fly_4.1.jpg";
import fly_5 from "../../images/fly_5.1.jpg";
import hat_1 from "../../images/hat_1.1.jpg";
import hat_2 from "../../images/hat_2.1.jpg";
import hat_3 from "../../images/hat_3.1.jpg";
import hat_4 from "../../images/hat_4.1.jpg";
import hat_5 from "../../images/hat_5.1.jpg";
import sticker_1 from "../../images/sticker_1.1.jpg";
import TableHeader from "../common/tableHeader";
import { Modal } from "react-bootstrap";

class AdminDashboardTable extends Component {
  columns = [
    {
      path: "name",
      label: "Name",
      content: (product) => (
        <Link to={`/products/${product._id}`}>{product.name}</Link>
      ),
    },
    { path: "category.name", label: "Category" },
    { path: "numberInStock", label: "Stock" },
    { path: "unitPrice", label: "Price" },
    { path: "discount", label: "Discount" },
    { path: "", label: "Price WD" },

    {
      path: "itemImage",
      label: "Image",
      cell: (product) => (
        <img
          src={product.itemImage}
          alt="not working"
          style={{ height: "75px" }}
        ></img>
      ),
    },
  ];

  deleteColumn = {
    key: "delete",
    content: (product) => (
      <button
        onClick={() => this.props.onDelete(product)}
        className="btn btn-danger btn-sm"
      >
        Delete
      </button>
    ),
  };

  showModal = () => {
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  constructor() {
    super();
    const user = auth.getCurrentUser();
    if (user && user.isAdmin) this.columns.push(this.deleteColumn);

    this.state = {
      show: false,
    };
    this.showModal = this.showModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
  }

  render() {
    const { products, onSort, sortColumn } = this.props;

    return (
      <div>
        {
          <table className="table">
            <TableHeader
              columns={this.columns}
              sortColumn={sortColumn}
              onSort={onSort}
            />
            <tbody>
              {products.map((product) => (
                <tr key={product._id}>
                  <td>
                    <a href={`/adminDashboard/${product._id}`}>
                      {product.name}
                    </a>
                  </td>
                  <td>{product.category.name}</td>
                  <td>{product.numberInStock}</td>
                  <td>${product.unitPrice}</td>
                  <td>{product.discount}%</td>
                  <td>
                    $
                    {(
                      product.unitPrice -
                      product.unitPrice * (product.discount / 100)
                    ).toFixed(2)}
                  </td>
                  <td>
                    <img
                      src={product.itemImage}
                      alt="No Image"
                      style={{ height: "75px" }}
                    ></img>
                  </td>
                  <td>
                    {/*  Need to move this to the model 
                     <button
                      onClick={() => this.props.onDelete(product)}
                      className="btn btn-danger btn-sm"
                      >
                      Delete
                    </button> */}
                  </td>
                  <td>
                    <button
                      className="btn btn-danger btn-sm"
                      onClick={() => this.showModal(product)}
                    >
                      {console.log({ product }, "Each row")}
                      Delete
                    </button>
                  </td>
                </tr>
                // ,
                // need to console log every new image, get log for image location, then post location to database.
                //need to make this automatic
                // console.log("inside test", fly_2)
              ))}
            </tbody>
          </table>
        }
        <Modal show={this.state.show}>
          <div tabIndex="-1">
            <div>
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title">Delete Product</h5>
                  <button
                    type="button"
                    className="btn-close"
                    data-bs-dismiss="modal"
                    aria-label="Close"
                    onClick={this.hideModal}
                  ></button>
                </div>
                <div className="modal-body">
                  <p>Are you sure you want to delete this product?</p>
                </div>
                <div className="modal-footer">
                  <button
                    type="button"
                    className="btn btn-secondary"
                    data-bs-dismiss="modal"
                    onClick={this.hideModal}
                  >
                    Close
                  </button>
                  <button
                    type="button"
                    className="btn btn-primary"
                    onClick={() => this.props.onDelete()}
                  >
                    Delete
                  </button>
                </div>
              </div>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

export default AdminDashboardTable;