React Components from Separate App not integrating into Main App

Question

I'm new to React and I'm doing my best to put together an app, so I've created two main sections and I'm at a point where I would like to combine them, but I'm not exactly sure how to go about it.

Here is the error I'm getting: TypeError: Cannot read property 'openSidebar' of undefined

and it points to this component:

// Sidebar button and opening of sidebar
// main function created to open sidebar button
import React from 'react';
import { FaBars } from 'react-icons/fa';
import { useGlobalContext } from './context';

const Home = () => { /*const data can setup data form each button under sidebar */ //<----- ERROR HERE
  const { openSidebar } = useGlobalContext();
  return (
    <main> 
      <button onClick={openSidebar} className='sidebar-toggle'>
        <FaBars />
      </button>
    </main>
  );
};

export default Home;

I've searched the error in many ways but they all seemed so specific to the app they occurred on.

Thank you for any help you can provide. Please let me know if there is more information needed!

EDIT: Below is the component that handles the const opendSidebar

// context class need to be added without change,
// setting of close open sidebar
import React, { useState, useContext } from 'react';

const AppContext = React.createContext(undefined, undefined);

const AppProvider = ({ children }) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const openSidebar = () => {
    setIsSidebarOpen(true);
  };
  const closeSidebar = () => {
    setIsSidebarOpen(false);
  };


  return (
    <AppContext.Provider
      value={{
        isSidebarOpen,
        openSidebar,
        closeSidebar,
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

export const useGlobalContext = () => {
  return useContext(AppContext);
};

export { AppContext, AppProvider };

Answer 1

As mentioned in my comment, it seems that you are missing a <AppProvider />. This provides the context values to all of the interested children further down. If a context provider is not found the defaultValue as provided to createContext(in your case undefined) will be used.

Please take a look at this example. specifically the root App.js. You will see a structure similar to

<AppProvider>
  <Home />
<AppProvider />

Thats really the only thing that's missing.

Answer 2

In React, Context is used to share global properties - thus avoiding the need to pass properties down multiple levels. ContextProvider still needs to be within the component's parent hierarchy so that deeply-nested components will have access to context properties.

In your program, enclose ‘Home’ component inside AppProvider. [ {children} variable inside AppProvider will point to the 'Home' component.]

 <AppProvider>
      <Home/>
  </AppProvider>

Now, you need to use context properties inside the component. This is done by hook useContext.

  const { openSidebar } = useContext(AppContext);

The child component (Home) now has access to the nearest AppContext (You can nest multiple AppProviders - the child component will use the nearest Context).

[You do not need useGlobalContext function. The context is already exported in your program. In the “Home” component use the hook 'useContext' and pass AppContext as argument.]

Complete Program is here -

https://codesandbox.io/s/react-context-integration-wfup1?file=/src/App.js