Question 73442 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

dataTable

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.

deleterecord

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

modal

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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}
          />

  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search