如何处理 reactjs 中 api 的删除弹出确认

Question

Could anyone help me out here please, all I'm trying to do here is to show popup modal confirmation for delete action, but every time I clicked on **Yes **btn to confirm my delete action the last product on the list always get deleted instead. I need help from anyone please?

Here is my code for handling the delete popup

    ```
     //OPEN DELETE MODALS
      const [openDeleteModal, isOpenDeleteModal] = useState(false);
      const closeDeleteModal = () => {
        isOpenDeleteModal(false);
        document.body.style.overflow = "unset";
      };
      const showDeleteModal = () => {
        isOpenDeleteModal(true);
      };
    ```
    

and here is the api

    ```
    //DELETE PRODUCT
      const deleteHandler = async (product) => {
        try {
          await axios.delete(`/api/products/${product._id}`, {
            headers: { Authorization: `Bearer ${userInfo.token}` },
          });
          toast.success("product deleted successfully", {
            position: "bottom-center",
          });
          dispatch({ type: "DELETE_SUCCESS" });
        } catch (err) {
          toast.error(getError(err), { position: "bottom-center" });
          dispatch({ type: "DELETE_FAIL" });
        }
      };
    ```

down here is my modal for confirmation

    ```
     {/* MODAL */}
                                  {openDeleteModal && (
                                    <div className="delete-modal">
                                      <div className="delete-modal-box">
                                        <div className="delete-modal-content">
                                          <p className="delete-modal-content-p">
                                            Are you sure to delete this product?
                                          </p>
                                          <div className="delete-modal-btn">
                                            <button
                                              onClick={closeDeleteModal}
                                              className="delete-modal-btn-close"
                                            >
                                              Close
                                            </button>
                                            <button
                                              onClick={() => {
                                                deleteHandler(product);
                                                closeDeleteModal();
                                              }}
                                              className="delete-modal-btn-yes"
                                            >
                                              {" "}
                                              Yes
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  )}
    ```
    



All I'm trying to do is to be able to delete any product from the list not the last product every time.

here is the entirety of my productList map looks like

 {products?.map((product, index) => (
                        <tr className="product-item-list" key={index}>
                          <tr>
                            <td className="product-item-id">{product._id}</td>
                            <td className="product-item-name">
                              {product.name}
                            </td>
                            <td className="product-item-price">
                              £{product.price}
                            </td>
                            <td className="product-item-category">
                              {product.category?.map((cat, index) => (
                                <span key={index}>{cat}</span>
                              ))}
                            </td>

                            <td className="product-item-size">
                              {product.size?.map((s, index) => (
                                <span key={index}>{s}&nbsp;</span>
                              ))}
                            </td>
                            <td className="product-btn-view">
                              <button
                                className="product-btn"
                                onClick={() =>
                                  navigate(`/admin/productedit/${product._id}`)
                                }
                              >
                                Edit
                              </button>
                              &nbsp;
                              <DeleteOutline
                                className="product-delete"
                                onClick={showDeleteModal}
                              />
                              {/* MODAL */}
                              {openDeleteModal && (
                                <div className="delete-modal">
                                  <div className="delete-modal-box">
                                    <div className="delete-modal-content">
                                      <p className="delete-modal-content-p">
                                        Are you sure to delete this product?
                                      </p>
                                      <div className="delete-modal-btn">
                                        <button
                                          onClick={closeDeleteModal}
                                          className="delete-modal-btn-close"
                                        >
                                          Close
                                        </button>
                                        <button
                                          onClick={() => {
                                            deleteHandler(product);
                                            closeDeleteModal();
                                          }}
                                          className="delete-modal-btn-yes"
                                        >
                                          {" "}
                                          Yes
                                        </button>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              )}
                            </td>
                          </tr>
                          <tr></tr>
                        </tr>
                      ))}

Answer 1

I guess it happens because all of your modals open when you call showDeleteModal And the last one is on the top, so when you click to delete the last closure works. Maybe its nessesary to pass id of product into the openDeleteModal . And than check if product.id equals to openDeleteModal .

Answer 2

Can you print to console the product.id when you click on the "Delete" button and check is it the correct id of the clicked product?