add handlers for click edit,delete that hide menu

client/src/item.js

@@ -2,7 +2,18 @@ import React, { useState, useRef, useEffect } from 'react';
 const Item = ({ data, itemHandler, boxID }) => {
     const menu = useRef(null);
     const handleClick = (event) => {
-        if (menu.current.contains(event.target)) return;
+        if (menu.current.contains(event.target)) {
+            console.log('here');
+            return;
+        }
+        setShowMenu(false);
+    }
+    const handleClickEdit = () => {
+        itemHandler.handleEdit(boxID,data._id);
+        setShowMenu(false);
+    }
+    const handleClickRemove = () => {
+        itemHandler.handleRemove(boxID, data._id);
         setShowMenu(false);
     }
     useEffect(() => {
@@ -11,6 +22,7 @@ const Item = ({ data, itemHandler, boxID }) => {
           document.removeEventListener('mousedown', handleClick);
         };
       }, []);
+
     const [showMenu, setShowMenu] = useState(false);
     const handleItemMenuClick = () => {
         setShowMenu(true);
@@ -18,11 +30,11 @@ const Item = ({ data, itemHandler, boxID }) => {
     const moreMenu = () => {
         return (
             <ul className='menu-more-list item'>
-                <li className='menu-action' onClick={() => itemHandler.handleEdit(boxID, data._id)}>
+                <li className='menu-action' onClick={handleClickEdit}>
                     <span className='material-icons icon'>edit</span>
                     <span className='label'>edit</span>
                 </li>
-                <li className='menu-action' onClick={() => itemHandler.handleRemove(boxID, data._id)}>
+                <li className='menu-action' onClick={handleClickRemove}>
                     <span className='material-icons icon'>delete</span>
                     <span className='label'>remove</span>
                 </li>