Update ContactItem.jsx

danretegan · Feb 25, 2024 · 4a4f36a · 4a4f36a
1 parent 4b3a8f1
commit 4a4f36a
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/components/contactItem/ContactItem.jsx b/src/components/contactItem/ContactItem.jsx
@@ -3,13 +3,22 @@ import PropTypes from 'prop-types';
 import styles from './ContactItem.module.css';
 import Button from '../Button';
 
-const ContactItem = ({ contact, onDeleteContact }) => {
+import { useDispatch } from 'react-redux';
+import { deleteContact } from '../../redux/slices/contactsSlice';
+
+const ContactItem = ({ contact }) => {
+  const dispatch = useDispatch();
+
+  const handleDeleteContact = () => {
+    dispatch(deleteContact(contact.id));
+  };
+
   return (
     <div className={styles.item}>
       <li>
         <strong>{contact.name}</strong>: <br /> {contact.number}
       </li>
-      <Button action={() => onDeleteContact(contact.id)}>Delete</Button>
+      <Button action={handleDeleteContact}>Delete</Button>
     </div>
   );
 };
@@ -20,7 +29,6 @@ ContactItem.propTypes = {
     name: PropTypes.string.isRequired,
     number: PropTypes.string.isRequired,
   }).isRequired,
-  onDeleteContact: PropTypes.func.isRequired,
 };
 
 export default ContactItem;