From 27462887acd87a62c649d1b67d5e3d780277ccf7 Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Thu, 5 May 2022 21:34:14 -0700
Subject: [PATCH] doc" add useStateValue to Header component to change the
 hardcode value to dynamic value

---
 src/Header/Header.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Header/Header.js b/src/Header/Header.js
index d2fcaab..0113ba3 100644
--- a/src/Header/Header.js
+++ b/src/Header/Header.js
@@ -2,8 +2,11 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Search, ShoppingCart } from "@material-ui/icons";
 import "./Header.css";
+import { useStateValue } from "../redux/StateProvider";
 
 function Header() {
+  const [{ basket }, dispatch] = useStateValue();
+
   return (
     <header className="header">
       <Link to="/">
@@ -36,7 +39,9 @@ function Header() {
       <Link to="/checkout">
         <section className="header__optionBasket">
           <ShoppingCart />
-          <span className="header__optionLineTwo header__basketCount">0</span>
+          <span className="header__optionLineTwo header__basketCount">
+            {basket?.length}
+          </span>
         </section>
       </Link>
     </header>