reactjsfunctioncrudreact-contextsimplemodal

How pass user id to modal?

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

Solution

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