react state not working as it is supposed

Question

I started doing this tutorial and reached to the point where it is about making a sidebar, instructor made a hook and also made a context provider and then his button does its toggle functionality as it is supposed but after introducing the hooks my sidebar is gone.

I should get something like this where the humburger menu toggle the sidebar, I haven't done hamburger menue yet, in mine it's just a X button in the side bar which it is supposed to toggle it but instead I don't even see my sidebar:

All I see is this:

This is my sidebar component:

import React from 'react'
import { Link, NavLink } from 'react-router-dom';
import { SiShopware } from 'react-icons/si'
import { MdOutlineCancel } from 'react-icons/md'
import { TooltipComponent } from '@syncfusion/ej2-react-popups'
import { links } from '../data/dummy';
import { useStateContext } from '../contexts/ContextProvider'; 
const Sidebar = () => {
  const { activeMenu, setActiveMenu } = useStateContext();
  const activeLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-white text-md m-2';
  const normalLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-lg hover:bg-gray-200 text-gray-700 dark:text-gray-200 dark:hover:text-black m-2';
  return ( 
    <div className="ml-3 h-screen md:overflow-hidden overflow-auto md:hover:overflow-auto pb-10">
      {activeMenu && (<>
        <div className="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
        <div className="display: inline-flex">
          <Link to ="/" onClick={() => { setActiveMenu(false) }} className="flex inline-flex items-center gap-3 ml-3 mt-4
           flex text-xl font-extrabold tracking-tight dark:text-white text-slate-900">
            <SiShopware /> <span>Shoppy</span>
          </Link>
          <div className="pl-5 p-5 mt-6 ml-14">
          <TooltipComponent content="Menu" position="BottomCenter">
            <button type="button"
            onClick={() => setActiveMenu(prevActiveMenu => !prevActiveMenu)}
            className="text-xl rounded-full hover:bg-light-grayblock md:hidden">
              <MdOutlineCancel />
            </button>
          </TooltipComponent>
          </div>
        </div>  
        <div className="mt-10">
          {links.map((item) => (
            <div key={item.title}>
              <p className="text-gray-400 dark:text-gray-400 m-3 mt-4 uppercase">
                {item.title}
              </p>  
              {item.links.map((link) => (
                <div className="flex">
                <NavLink to={`/${link.name}`}
                key={link.name}
                onClick={() => {}}
                className={({ isActive }) =>
                  isActive ? activeLink : normalLink
                }
                >
                  <div className="mt-1 pl-2">
                  {link.icon}
                  </div>
                  <span className="capitalize">
                  {link.name}
                  </span>
               
                </NavLink>
                </div>
              ))}
            </div>
          ))}
        </div>
        </div>
        </>)}
    </div>
  )
}

export default Sidebar

This is the contextProvide.js:

import React from 'react'
import { Link, NavLink } from 'react-router-dom';
import { SiShopware } from 'react-icons/si'
import { MdOutlineCancel } from 'react-icons/md'
import { TooltipComponent } from '@syncfusion/ej2-react-popups'
import { links } from '../data/dummy';
import { useStateContext } from '../contexts/ContextProvider'; 
const Sidebar = () => {
  const { activeMenu, setActiveMenu } = useStateContext();
  const activeLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-white text-md m-2';
  const normalLink = 'flex items-center w-40 gap-5 pl-4 pt-3 pb-2.5 rounded-lg text-lg hover:bg-gray-200 text-gray-700 dark:text-gray-200 dark:hover:text-black m-2';
  return ( 
    <div className="ml-3 h-screen md:overflow-hidden overflow-auto md:hover:overflow-auto pb-10">
      {activeMenu && (<>
        <div className="overflow-y-auto py-4 px-3 bg-gray-50 rounded dark:bg-gray-800">
        <div className="display: inline-flex">
          <Link to ="/" onClick={() => { setActiveMenu(false) }} className="flex inline-flex items-center gap-3 ml-3 mt-4
           flex text-xl font-extrabold tracking-tight dark:text-white text-slate-900">
            <SiShopware /> <span>Shoppy</span>
          </Link>
          <div className="pl-5 p-5 mt-6 ml-14">
          <TooltipComponent content="Menu" position="BottomCenter">
            <button type="button"
            onClick={() => setActiveMenu(prevActiveMenu => !prevActiveMenu)}
            className="text-xl rounded-full hover:bg-light-grayblock md:hidden">
              <MdOutlineCancel />
            </button>
          </TooltipComponent>
          </div>
        </div>  
        <div className="mt-10">
          {links.map((item) => (
            <div key={item.title}>
              <p className="text-gray-400 dark:text-gray-400 m-3 mt-4 uppercase">
                {item.title}
              </p>  
              {item.links.map((link) => (
                <div className="flex">
                <NavLink to={`/${link.name}`}
                key={link.name}
                onClick={() => {}}
                className={({ isActive }) =>
                  isActive ? activeLink : normalLink
                }
                >
                  <div className="mt-1 pl-2">
                  {link.icon}
                  </div>
                  <span className="capitalize">
                  {link.name}
                  </span>
               
                </NavLink>
                </div>
              ))}
            </div>
          ))}
        </div>
        </div>
        </>)}
    </div>
  )
}

export default Sidebar

This is the index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css'; 
import App from './App';
import { ContextProvider } from './contexts/ContextProvider';//TODO:HERE
ReactDOM.render(
    <React.StrictMode> //TODO:HERE
    <ContextProvider>
      <App />
    </ContextProvider>
  </React.StrictMode>,//TODO:HERE
    document.getElementById('root') 
    );

And the app.js:

import React, { useEffect } from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { FiSettings } from 'react-icons/fi'
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

import { Navbar, Footer, Sidebar, ThemeSetting } from './components';
import { ECommerce, Orders, Calendar, Employees, Stacked, Pyramid, Customers, Kanban, Area, Bar, Pie, Financial, ColorPicker, ColorMapping, Editor }
from './pages'
import { useStateContext } from './contexts/ContextProvider';


import './App.css'

const App = () => {
  const { activeMenu } = useStateContext;
  return (
    <div>
        <BrowserRouter>
                <div className="flex relative dark:bg-main-dark-bg">
                <div className="fixed right-4 bottom-4" style={{ zIndex:'1000'}}>
                    <TooltipComponent content="Settings" position="Top">
                        <button type="button" className="text-3xl p-3 hover:drop-shadow-xl hover:bg-light-gray text-white "
                        style={{background:'blue', borderRadius: '50%'}}
                        >
                            
                        <FiSettings />
                        </button>
                    </TooltipComponent>
                </div>
                { activeMenu ? (
                    <div className = "w-72 fixed sidebar dark:bg-secondary-dark-bg bg-white">
                        <Sidebar />
                    </div>
                ) : (
                    <div className="w-0 dark:bg-secondary-dark-bg">
                         <Sidebar />
                    </div>
                )}
                <div className={
                    `dark:bg-main-bg bg-main-bg min-h-screen w-full ${activeMenu ? 'w-full'
                    : 'flex-2'}`
                }>
                    <div className="fixed md:static bg-main-bg dark:bg-main-dark-bg navbar w-full">
                        <Navbar />
                    </div>
                </div>
                <div>
                    <Routes>
                        {/*Dashboard*/}
                        <Route path="/" element={<ECommerce />}/>
                        <Route path="/ecommerce" element={<ECommerce />}/>
                        {/*Pages */}
                        <Route path="/orders" element={<Orders />}/>
                        <Route path="/employees" element={<Employees />}/>
                        <Route path="/customers" element={<Customers />}/>
                        {/*Apps*/}
                        <Route path="/kanban" element={<Kanban />}/>
                        <Route path="/editor" element={<Editor />}/>
                        <Route path="/calendar" element={<Calendar />}/>
                        <Route path="/color-picker" element={<ColorPicker />}/>
                        {/*Charts*/}
                        {/*
                        <Route path="/line" element={<Line />}/> 
                        <Route path="/area" element={<Area />}/>
                        <Route path="/bar" element={<Bar />}/>
                        <Route path="/pie" element={<Pie />}/>
                        <Route path="/financial" element={<Financial />}/>
                        <Route path="/color-mapping" element={<ColorMapping />}/>
                        <Route path="/pyramid" element={<Pyramid />}/>
                        <Route path="/stacked" element={<Stacked />}/>
                    */}
                    </Routes>
                </div>
            </div> 
        </BrowserRouter>
    </div>
  )
}

export default App

this is the link to what I did In case someone wants to see it live: GitPod Link

this is the main repo: Main Repo

Answer 1

Problem in use of useStateContext, you forget to use as function

App.js

const { activeMenu } = useStateContext();