diff --git a/src/componets/KandyKorner.js b/src/componets/KandyKorner.js
index 20243f8..da91645 100644
--- a/src/componets/KandyKorner.js
+++ b/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 = () => {
Kandy Korner
Locations
+ Products
+
>
)
}
\ No newline at end of file
diff --git a/src/componets/locations/Locations.js b/src/componets/locations/Locations.js
index 9850d82..c1c0d7c 100644
--- a/src/componets/locations/Locations.js
+++ b/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([])
diff --git a/src/componets/products/Products.js b/src/componets/products/Products.js
index e69de29..569ec49 100644
--- a/src/componets/products/Products.js
+++ b/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 (
+ <>
+ {totalProducts}
+ {
+ products.map(
+ (productObject) => {
+ return {productObject.candyName} - Price - ${productObject.price} - Candy Type - {productObject.productType.candyType}
;
+ }
+ )
+
+ }
+ >
+ )
+ }
\ No newline at end of file