How pass user id to modal? - reactjs

Question

I have compiled a project with context. Crud operations work here without problems. However, there is a problem that when you click on the delete button,the confirm modal opens, if I click OK the selected contact must be deleted for his id.
But I don't know how to pass it's contact id to modal for delete. Now when I click ok function it 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

Answer 1

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'))
}

Answer 2

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))