Stack Exchange
How to Pass the correct ID to the modal in reactJs?
Need help guys. the modal is not prompting the correct ID of the data that I want to delete
I have a DataTable.jsx like this below.
import React, { useState, useEffect } from "react";
import axios from "axios";
import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";
import { Link } from "react-router-dom";
import { AddParameter } from "./AddParameter";
import { DeleteParameter } from "./DeleteParameter";

export const ParameterDataTable = () => {
  const [parameters, setParameters] = useState([]);

  useEffect(() => {
    loadParameters();
  }, []);

  const loadParameters = async () => {
    const result = await axios.get("http://localhost:8080/parameters");
    setParameters(result.data);
  };

  const deleteParam = async (id) => {
    await axios.delete(`http://localhost:8080/parameter/${id}`);
    loadParameters();
  };

  const column = [
    {
      name: "Param Name",
      selector: (row) => row.param_name,
      width: "180px",
      sortable: true,
      alignItems: "center",
      display: "flex",
    },
    {
      name: "Sequence Number",
      selector: (row) => row.param_sequence_number,
      width: "150px",
      sortable: true,
    },
    {
      name: "Parameter Value",
      selector: (row) => row.param_value,
      width: "150px",
      sortable: true,
    },
    {
      name: "Parameter ID",
      selector: (row) => row.param_id,
      width: "150px",
      sortable: true,
    },
    {
      name: "",
      width: "110px",
      cell: (row) => (
        <DeleteParameter deleteParam={deleteParam} row={row.param_id} />
      ),
    },
    {
      name: "",
      width: "110px",
      cell: (row) => (
        <button
          className="btn btn-primary mx-2"
          onClick={() => deleteParam(row.param_id)}
        >
          Edit
        </button>
      ),
    },
  ];

  return (
    <div className="datatable">
      <DataTableExtensions
        columns={column}
        data={parameters}
        print={false}
        export={false}
      >
        <DataTable
          title="Parameters"
          columns={column}
          data={parameters}
          pageSize={5}
          pagination
          fixedHeader
          fixedHeaderScrollHeight="450px"
          highlightOnHover
          actions={<AddParameter loadParameters={loadParameters} />}
        />
      </DataTableExtensions>
    </div>
  );
};


which resulted below

and I have a DeleteParameter.jsx file which is a modal that confirms if the user wants the records to be removed. the modal will show after the Delete button is clicked
import React from "react";
import "bootstrap/dist/js/bootstrap.bundle.js";
import "bootstrap/dist/css/bootstrap.css";

export const DeleteParameter = (props) => {
  return (
    <div className="App">
      <div className="openbtn text-center">
        <button
          type="button"
          class="btn btn-danger"
          data-bs-toggle="modal"
          data-bs-target="#myModal"
        >
          Delete
        </button>

        <div className="modal" tabindex="-1" id="myModal">
          <div className="modal-dialog">
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title">Remove?</h5>
                <button
                  type="button"
                  className="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div className="modal-body">
                <p>
                  Do you want to remove this record premanently? {props.row}
                </p>
              </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  No
                </button>
                <button
                  type="button"
                  className="btn btn-primary"
                  onClick={() => props.deleteParam(props.row)}
                  data-bs-dismiss="modal"
                >
                  Yes
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};


the problem is when I'm trying to delete the second record on this table which in this case
the record having 76 as ID. the modal always gets the top ID of the table.

I print the ID to the modal for checking.
The Modal is prompting the 75 instead of the 76

What am I missing here, I tried passing the row.param_id as props, but still it's not working.
Edit:
It always gets the ID of the first records in the data table, tried it when I sort the data table columns and click delete on any records, it will prompt the first ID of the data Table.

If you use modal, you should clear modal (ex: destroy, ...) don't use hide modal. because it can still save the value of the previous object

right now sir, as I observe, It always gets the ID of the first records in the data table, tried it when I sort the data table columns and click delete on any records, it will prompt the first ID of the data Table.

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

I've solve this guys by an creating estate for the ID, and update it on the
onClick event of the delete button before passing it as props to the child component.
const [selectedRow, setSelectedRow] = useState();

then call below function in the onClick event
  const idToRemove = useCallback((row) => {
    setSelectedRow(row);
    console.log("delete:" + row);
  });

lastly, passing it as props to the child component
          <DeleteParameter
            selectedRow={selectedRow}
            deleteParam={deleteParam}
          />

