Quantity field repaired, each list item given a key, IDs on list-items changed to className

ecom-web/src/components/shopping-cart/CartItem.js

@@ -9,25 +9,25 @@ export default function CartItem(props) {
             {/* Flex-Direction: Row */}
 
             {/* Left image div */}
-            <div id="productImageContainer">
-                <img className="productImage" alt="" src={props.productInfo.productImageUrl} />
+            <div className="productImageContainer">
+                <img className="productImage" alt="Product" src={props.productInfo.productImageUrl} />
             </div>
 
             {/* Name and Product details */}
-            <div id="nameAndDetails">
-                <div id="productName">{props.productInfo.productName}</div>
-                <div id="productStock">{props.productInfo.availableStock} left in stock</div>
+            <div className="nameAndDetails">
+                <div className="productName">{props.productInfo.productName}</div>
+                <div className="productStock">{props.productInfo.availableStock} left in stock</div>
                 
-                <div id="quantityControls">
-                    <select id="productQuantitySelect"><option>{props.productInfo.quantity}</option></select>
+                <div className="quantityControls">
+                    <select className="productQuantitySelect"><option>{props.quantity}</option></select>
                     <button>Delete</button>
                 </div>
                 
             </div>
 
             {/* Price and promotions */}
-            <div id="priceAndPromotions">
-                <div id="productPrice">${props.productInfo.price.toFixed(2)}</div>
+            <div className="priceAndPromotions">
+                <div className="productPrice">${props.productInfo.price.toFixed(2)}</div>
             </div>
 
         </div>

ecom-web/src/components/shopping-cart/shopping-cart.css

@@ -34,13 +34,13 @@
     justify-content: space-between;
 }
 
-#productName {
+.productName {
     padding-top: 25px;
     margin-bottom: 15px;
     font-size: 125%;
 }
 
-#productImageContainer {
+.productImageContainer {
     display: flex;
     width: 30%;
     margin-right: 20px;
@@ -56,7 +56,7 @@
     /* max-height: 100%; */
 }
 
-#nameAndDetails {
+.nameAndDetails {
     display: flex;
     width: 45%;
     height: 200px;
@@ -64,7 +64,7 @@
     text-align: left;
 }
 
-#priceAndPromotions {
+.priceAndPromotions {
     display: flex;
     width: 10%;
     height: 200px;
@@ -73,20 +73,20 @@
     align-items: flex-end;
 }
 
-#productPrice {
+.productPrice {
     margin-top: 40px;
     font-size: 125%;
     font-weight: bold;
 }
 
-#quantityControls{
+.quantityControls{
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-end;
 }
 
-#productQuantitySelect {
+.productQuantitySelect {
     width: 40px;
 }
 

ecom-web/src/components/shopping-cart/shopping-cart.js

@@ -16,12 +16,16 @@ export default function ShoppingCart() {
     const productsFromRefs = []
 
     cartRefs.map((cartRef) => {
-      productsFromRefs.push(allProducts.filter((currProduct) => currProduct.sku === cartRef.productRef.sku)[0])
+      let tempCartItem = {
+        product: allProducts.filter((currProduct) => currProduct.sku === cartRef.productRef.sku)[0],
+        quantity: cartRef.quantity
+      }
+      
+      productsFromRefs.push(tempCartItem)
     })
 
     setCartItems(productsFromRefs)
 
-
   }, [cartRefs])
 
 
@@ -33,7 +37,7 @@ export default function ShoppingCart() {
       <div id="cartItemList">
         {cartItems.map((currItem) => {
           return (
-            <CartItem productInfo={currItem} />
+            <CartItem productInfo={currItem.product} quantity={currItem.quantity} key={currItem.product.sku}/>
           )
         })}
       </div>