From 1a342f3438ed1c4e47de8ee6c73286bf5b2e6d22 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 20 Jul 2020 14:09:24 +0300
Subject: [PATCH] useContext

---
 src/components/Header/Header.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index dbe9d72..ae65f14 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -16,6 +16,7 @@ const Header = () => {
   const [isScrolled, setIsScrolled] = React.useState(false)
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
   const { pathname } = useLocation()
+  const { isDark, toggleLightTheme, toggleDarkTheme } = React.useContext(ThemeContext)
 
   React.useEffect(() =>  {
     isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
@@ -56,9 +57,7 @@ const Header = () => {
             </nav>
           </div>
           <div className="header-nav__theme">
-            <ThemeContext.Consumer>
-              {theme => theme.isDark ? <SunIcon onClick={theme.toggleLightTheme} /> : <MoonIcon onClick={theme.toggleDarkTheme} />}
-            </ThemeContext.Consumer>
+            {isDark ? <SunIcon onClick={toggleLightTheme} /> : <MoonIcon onClick={toggleDarkTheme} />}
           </div>
         </div>
         <div className={isMobileOpen ? 'header-content__nav mobile mobileOpen' : 'header-content__nav mobile'}>