Added upc to products table

src/component/ProductRow.jsx

@@ -13,9 +13,9 @@ export default function ProductRow({ product, handleDelete }) {
   };
 
   const handleCloseDelete = (sku) => {
-    handleDelete(sku)
+    handleDelete(sku);
     handleClose();
-  }
+  };
 
   const handleShow = () => setShow(true);
   const handleShowConfirm = () => setShowConfirm(true);
@@ -24,6 +24,7 @@ export default function ProductRow({ product, handleDelete }) {
   return (
     <tr>
       <td onClick={handleShow}>{product.sku}</td>
+      <td onClick={handleShow}>{product.upc}</td>
       <td onClick={handleShow}>{product.productName}</td>
       <td onClick={handleShow}>${product.price}</td>
       <td onClick={handleShow}>{product.category}</td>
@@ -40,10 +41,14 @@ export default function ProductRow({ product, handleDelete }) {
           <div className="modal-img">
             <img src={product.productImageUrl} alt={product.productName} />
           </div>
-          <h5>{product.sku}</h5>${product.price}<br />
-          {product.productDescription}<br />
-          In Stock: {product.availableStock}<br />
-          Blocked Stock: {product.blockedStock}<br />
+          <h5>{product.sku}</h5>${product.price}
+          <br />
+          {product.productDescription}
+          <br />
+          In Stock: {product.availableStock}
+          <br />
+          Blocked Stock: {product.blockedStock}
+          <br />
           Fulfilled Stock: {product.fulfilledStock}
         </Modal.Body>
 
@@ -65,7 +70,12 @@ export default function ProductRow({ product, handleDelete }) {
               Cancel
             </Button>
             &nbsp;&nbsp;
-            <Button variant="danger" onClick={() => handleCloseDelete(product.sku)}>Yes, delete</Button>
+            <Button
+              variant="danger"
+              onClick={() => handleCloseDelete(product.sku)}
+            >
+              Yes, delete
+            </Button>
           </Alert>
         </Modal.Footer>
       </Modal>

src/component/ProductTable.jsx

@@ -30,6 +30,7 @@ export default function ProductTable({ productData }) {
         <thead>
           <tr>
             <th>SKU</th>
+            <th>UPC</th>
             <th>Product Name</th>
             <th>Price</th>
             <th>Category</th>