title: ReactJS hooks: how to useContext in two different .js files?
body: <p>I have two components in the same .js file using React.createContext() and React.useContext(). Now I would like to move the Menu component in another .js file but I'm having trouble using the same context. This is the code:</p>
  
  <pre><code>const ManagerContext = React.createContext(null);
  
  export default function LessonManager() {
  
  const [title, setTitle] = React.useState('SomeOtherTitle');
  const [editing, toggleEditor] = React.useState(false);
  
  const value = React.useMemo(() =&gt; {
    return {
      title,
      setTitle,
      editing,
      toggleEditor,
      log: (t) =&gt; console.log(t)
    }
  }, [title, editing]);
  
  return (
    &lt;ManagerContext.Provider value={value}&gt;
  
      &lt;div className='box-default expand'&gt;
  
        &lt;div className='handle' style={{display: 'flex', justifyContent: 'center', width: '100%', cursor: 'grab'}}&gt;
  
            &lt;LessonMenu/&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/ManagerContext.Provider&gt;
  )
  }
  
  export function LessonMenu() {
  
    const state = React.useContext(ManagerContext);
  
    return (
        &lt;ButtonGroup size='sm'&gt;
            &lt;IconButton
                className='rsuite-btn menu-button'
                onClick={()=&gt;state.toggleEditor(!state.editing)}
                icon={ &lt;Icon icon={state.editing ? ('eye') : ('edit2')} /&gt;} /&gt;
        &lt;/ButtonGroup&gt;
    )
  }
  </code></pre>
  
  <p>I tried to export the const ManagerContext:</p>
  
  <pre><code>export const ManagerContext = React.createContext(null);
  </code></pre>
  
  <p>and import it in the Menu.js file I created with the Menu component, but it doesn't work. What am I doing wrong?</p>