completed through ch 7

src/componets/KandyKorner.js

@@ -1,4 +1,5 @@
 import { LocationsList } from "./locations/Locations"
+import { ProductList } from "./products/Products"
 
 export const KandyKorner = () => {
     return(
@@ -6,6 +7,8 @@ export const KandyKorner = () => {
     <h1>Kandy Korner</h1>
     <h2>Locations</h2>
     <LocationsList />
+    <h2>Products</h2>
+    <ProductList />
     </>
 )
 }

src/componets/locations/Locations.js

@@ -1,7 +1,4 @@
-import React, {
-    useEffect,
-    useState
-} from "react";
+import React, {useEffect,useState} from "react";
 
 export const LocationsList = () => {
     const [locations, setLocationList] = useState([])

src/componets/products/Products.js

@@ -0,0 +1,29 @@
+import React, {useEffect,useState} from "react";
+
+export const ProductList = () => {
+    const [products, setProductList] = useState([])
+    const [totalProducts, totalProductAmounts] = useState("")
+
+    useEffect(
+        () => {
+            // table call must be singular in the fetch link in order to properly retrieve objects
+            fetch("http://localhost:8088/products?_expand=productType&_sort=productTypeId&_order=asc")
+                .then(res => res.json())
+                .then(setProductList)
+        },
+        []
+    )
+    return ( 
+         <>
+        <div>{totalProducts}</div>
+        {
+            products.map(
+                (productObject) => {
+                    return <p key={`products--${productObject.id}`}> {productObject.candyName} - Price - ${productObject.price} - Candy Type - {productObject.productType.candyType} </p>;
+                }
+                )
+
+    }
+    </>
+    )
+    }