title: React Components from Separate App not integrating into Main App
body: <p>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.</p>
  <p>Here is the <strong>error</strong> I'm getting:
  <code>TypeError: Cannot read property 'openSidebar' of undefined</code></p>
  <p>and it <strong>points to</strong> this component:</p>
  <pre><code>// 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 = () =&gt; { /*const data can setup data form each button under sidebar */ //&lt;----- ERROR HERE
    const { openSidebar } = useGlobalContext();
    return (
      &lt;main&gt; 
        &lt;button onClick={openSidebar} className='sidebar-toggle'&gt;
          &lt;FaBars /&gt;
        &lt;/button&gt;
      &lt;/main&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <p>I've searched the error in many ways but they all seemed so specific to the app they occurred on.</p>
  <p>Thank you for any help you can provide.
  <strong>Please let me know if there is more information needed!</strong></p>
  <p>EDIT:
  Below is the component that handles the <code>const</code> <code>opendSidebar</code></p>
  <pre><code>// 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 }) =&gt; {
    const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  
    const openSidebar = () =&gt; {
      setIsSidebarOpen(true);
    };
    const closeSidebar = () =&gt; {
      setIsSidebarOpen(false);
    };
  
  
    return (
      &lt;AppContext.Provider
        value={{
          isSidebarOpen,
          openSidebar,
          closeSidebar,
        }}
      &gt;
        {children}
      &lt;/AppContext.Provider&gt;
    );
  };
  
  export const useGlobalContext = () =&gt; {
    return useContext(AppContext);
  };
  
  export { AppContext, AppProvider };
  </code></pre>