title: How to share state between NextJS components
body: <p>I want to pass a state between pages in Next.js. My App.js is wrapped in a context provider like so</p>
  <pre><code>import { useRouter } from 'next/router'
  import { ClickProvider } from '../context/clickContext'
  
  function MyApp({ Component, pageProps }) {
    const router = useRouter()
    
    return (
          &lt;ClickProvider&gt;
                  &lt;Component {...pageProps} key={router.asPath} /&gt;
          &lt;/ClickProvider&gt;
    )
  }
  
  export default MyApp
  
  </code></pre>
  <p>Here's my context provider</p>
  <pre><code>import { createContext, useState } from 'react';
  
  const MenuContext = createContext()
  
  export const ClickProvider = ({ children }) =&gt; {
    const [menuEnterPage, setMenuEnterPage] = useState('');
  
    return (
      &lt;MenuContext.Provider value={[menuEnterPage]}&gt;
        {children}
      &lt;/MenuContext.Provider&gt;
    );
  };
  
  export default MenuContext;
  </code></pre>
  <p>Inside my header component I want to set the <code>menuEnterPage</code> to be the path of the page the user tapped the button on and that data to persist between pages.</p>
  <pre><code>import Link from 'next/link'
  import React, { useContext, useState, useEffect, useRef } from &quot;react&quot;;
  import { useRouter } from &quot;next/router&quot;
  import MenuContext from '../context/clickContext';
  
  export default function Header({mobileHidden, router = useRouter()}) {
      const [isActive, setActive] = useState(mobileHidden);
      const [menuEnterPage, setMenuEnterPage] = useContext(MenuContext);
  
      const handleToggle = () =&gt; {
        setActive(!isActive);
        if (isActive) {
          
        } else {
          setMenuEnterPage(router.asPath)
          console.log(menuEnterPage)
        }
      };
  
      return (
        &lt;header&gt;
              &lt;button className=&quot;md:hidden&quot; onClick={handleToggle}&gt;{isActive ? &quot;Menu&quot; : &quot;Exit&quot; }&lt;/button&gt;
      &lt;/header&gt;
      );
    }
  
  </code></pre>
  <p>Currently when I run the project and click the button it fails with error</p>
  <blockquote>
  <p>TypeError: setMenuEnterPage is not a function</p>
  </blockquote>