How pass user id to modal?-CodePudding

I have compiled a project with context. Crud operations work here without problems. However, there is such a problem that when you click on the delete button , opened the confirm modal, if i click OK the selected contact must be deleted for his id. But i dont know how pass its contact id to modal for delete . Now i clicked ok function falls into the catch block

import React from "react";
import { Modal, Space } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import DeleteIcon from "../assets/icons/DeleteIcon";
import { useContext } from "react";
import { GlobalContext } from "../context/GlobalState";
import { useParams } from "react-router-dom";
const ConfirmModal = () => {

  const {id} = useParams()
  
  const {  REMOVE_CONTACT, contacts } = useContext(GlobalContext);
  

  const confirm = () => {
    Modal.confirm({
    title: 'Do you want to delete this contact?',
    icon: <ExclamationCircleOutlined />,
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
      })
      .then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
      .catch(()=>console.log('error'))
    },
    onCancel() {},
  });
  };

  return (
    <>
      <div onClick={confirm}>
       <DeleteIcon/>
      </div>
    </>
  );
};

export default ConfirmModal;

import React, { useContext } from "react";
import { GlobalContext } from "../../context/GlobalState";
import DeleteIcon from "../../assets/icons/DeleteIcon";
import EditIcon from "../../assets/icons/EditIcon";
import styles from "../Contacts/contacts.module.scss";
import { NavLink } from "react-router-dom";
import InfoModal from "../../utils/InfoModal";
import ConfirmModal from "../../utils/ConfirmModal";
const Contacts = () => {
  
  const { contacts, REMOVE_CONTACT } = useContext(GlobalContext);

  return (
    <div className={styles.contacts} >
      <div className="container">
        <div className="row  d-flex justify-content-center">
          {contacts.map((contact) => (
            <div className="col-lg-7 p-3" key={contact.id}>
              <div className={styles.contact}>
                <div>
                  <h1 className={styles.title}>
                    {contact.name} {contact.surname} {contact.fatherName}
                  </h1>
                  <p className={styles.desc}>{contact.specialty}</p>
                  
                </div>
                <div className={styles.btns}>
                  <div className={`${styles.contactBtn} ${styles.infoBtn}`}>
                    <InfoModal/>
                  </div>
                  <NavLink className={`${styles.contactBtn} ${styles.editBtn}`} to={`/contact/edit/${contact.id}`}>
                    <EditIcon contact={contact} />
                  </NavLink>
                  <div className={`${styles.contactBtn} ${styles.deleteBtn}`}  >
                    <ConfirmModal />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Contacts;

enter image description here

CodePudding user response：

You should accept an id prop in the ConfirmModal component, like this:

const ConfirmModal = ({id}) => {
  
  const {  REMOVE_CONTACT, contacts } = useContext(GlobalContext);

  const confirm = () => {
    Modal.confirm({
    title: 'Do you want to delete this contact?',
    icon: <ExclamationCircleOutlined />,
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
      })
      .then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
      .catch(()=>console.log('error'))
    },
    onCancel() {},
  });
  };

  return (
    <>
      <div onClick={confirm}>
       <DeleteIcon/>
      </div>
    </>
  );
};

Also, pass the id where ConfirmModal is used, like this:

<ConfirmModal id={contact.id}/>

Also, change your onOk handler, to something more deterministic, using Math.random will get you a lot of errors:

onOk() {
  return new Promise((resolve, reject) => {
    setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
  })
  .then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
  .catch(()=>console.log('error'))
}

CodePudding user response：

If you console.log the error from the catch block, it'll tell you what's wrong.

return new Promise((resolve, reject) => {
  setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
})
.then(() =>REMOVE_CONTACT(contacts.find((user) => user.id === id)))
.catch((err) => console.log(err))