From 58e4bea18697c1ec562bdbcd79c900cec93ddab6 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Thu, 5 May 2022 21:47:22 -0700
Subject: [PATCH] doc: add useStateValue along with CheckoutProduct component

---
 src/Checkout/Checkout.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/Checkout/Checkout.js b/src/Checkout/Checkout.js
index 705ce8b..8205b40 100644
--- a/src/Checkout/Checkout.js
+++ b/src/Checkout/Checkout.js
@@ -1,11 +1,14 @@
 import React from "react";
+import { useStateValue } from "../redux/StateProvider";
 
 // Import file
 import Subtotal from "./Subtotal";
+import CheckoutProduct from "./CheckoutProduct";
 
 import "./Checkout.css";
 
 function Checkout() {
+  const [{ basket }, dispatch] = useStateValue();
   return (
     <section className="checkout">
       <article className="checkout__left">
@@ -17,6 +20,15 @@ function Checkout() {
 
         <article>
           <h2 className="checkout__title">Your Shopping Basket</h2>
+          {basket.map((item) => (
+            <CheckoutProduct
+              id={item.id}
+              title={item.title}
+              image={item.image}
+              price={item.price}
+              rating={item.rating}
+            />
+          ))}
         </article>
       </article>