access body prop before desc

client/src/app.js

@@ -8,7 +8,7 @@ import './styles/app.css';
 function App() {
 
   const [data, setData] = useState([]);
-  const [boxID, setBoxID] = useState();
+  const [boxID, setBoxID] = useState(undefined);
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
   const [showModalBox, setShowModalBox] = useState(false);
@@ -17,7 +17,7 @@ function App() {
   const [editBoxBool, setEditBoxBool] = useState(false);
   const [editItemBool, setEditItemBool] = useState(false);
 
-  const [itemID, setItemID] = useState();
+  const [itemID, setItemID] = useState(undefined);
   const [itemName, setItemName] = useState('');
   const [itemDescription, setItemDescription] = useState('');
 
@@ -82,7 +82,7 @@ function App() {
       setData(response.data);
     }
     catch (error) {
-
+      console.log(error);
     }
   }
 
@@ -109,6 +109,7 @@ function App() {
   const handleSubmitBox = (event) => {
     event.preventDefault();
     setShowModalBox(false);
+    setEditBoxBool(false);
     const boxData = {
       id: boxID,
       name: boxName,
@@ -127,7 +128,9 @@ function App() {
     removeBox(id);
   }
   const handleAddBox = () => {
+    clearFormBox();
     setShowModalBox(true);
+    setEditBoxBool(false);
   }
   const handleEditBox = (id) => {
     const box = data.find(box => box._id === id);
@@ -138,10 +141,9 @@ function App() {
     setShowModalBox(true);
   }
   const clearFormBox = () => {
-    setEditBoxBool(false);
     setBoxName('');
     setBoxDescription('');
-    setBoxID(null);
+    setBoxID(undefined);
   }
 
 
@@ -172,6 +174,7 @@ function App() {
 
   const editItem = async (boxID, itemID, itemData) => {
     try {
+      console.log(itemData);
       const response = await axios.put(`${api.baseApiUrl}/${boxID}/item/${itemID}`, itemData);
       const boxData = [...data];
       boxData.splice(boxData.findIndex(box => box._id === boxID), 1, response.data);
@@ -195,18 +198,19 @@ function App() {
   }
 
   const handleAddItem = (id) => {
+    clearFormItem();
     setBoxID(id);
     setEditItemBool(false);
     setShowModalItem(true);
   }
   const handleEditItem = (boxID, itemID) => {
+    clearFormItem();
     const box = data.find(box => box._id === boxID);
     const item = box.item.find(item => item._id === itemID);
-    
     setBoxID(boxID);
     setItemID(itemID);
-    setItemName(item.name);
-    setItemDescription(item.description);
+    setItemName(item.name || '');
+    setItemDescription(item.description || '');
 
     setEditItemBool(true);
     setShowModalItem(true);
@@ -222,11 +226,9 @@ function App() {
       name: itemName,
       description: itemDescription
     }
-    if (editItemBool) {
-      console.log('edititem');
+    if (editItemBool)
       editItem(boxID, itemID, itemData);
 
-    }
     else
       createItem(boxID, itemData);
 
@@ -275,7 +277,7 @@ function App() {
     <fieldset>
       <input id="id" name="id" value={itemID} readOnly hidden></input>
       <label htmlFor="item-name">name
-    <input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
+    <input autoFocus onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
       </label>
       <label htmlFor="item-description">description
     <input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>

server/server.js

@@ -86,7 +86,7 @@ app.put('/box/:boxId/item/:itemId', async (request, response) => {
     await Box.updateOne({ '_id': boxID, 'item._id': itemID }, {
         $set: {
             'item.$.name': request.body.name,
-            'item.$.description': request.description
+            'item.$.description': request.body.description
         }
     })
     const updatedBox = await getBox(boxID);