ReactJS hooks: how to useContext in two different .js files?

Question

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:

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(() => {
  return {
    title,
    setTitle,
    editing,
    toggleEditor,
    log: (t) => console.log(t)
  }
}, [title, editing]);

return (
  <ManagerContext.Provider value={value}>

    <div className='box-default expand'>

      <div className='handle' style={{display: 'flex', justifyContent: 'center', width: '100%', cursor: 'grab'}}>

          <LessonMenu/>

      </div>

    </div>

  </ManagerContext.Provider>
)
}

export function LessonMenu() {

  const state = React.useContext(ManagerContext);

  return (
      <ButtonGroup size='sm'>
          <IconButton
              className='rsuite-btn menu-button'
              onClick={()=>state.toggleEditor(!state.editing)}
              icon={ <Icon icon={state.editing ? ('eye') : ('edit2')} />} />
      </ButtonGroup>
  )
}

I tried to export the const ManagerContext:

export const ManagerContext = React.createContext(null);

and import it in the Menu.js file I created with the Menu component, but it doesn't work. What am I doing wrong?

Answer 1

Your code seems to work, note how you need to import the context:

// export const ManagerContext = React.createContext(null);

import { ManagerContext } from "./Menu.js";

export function LessonMenu() {
  const { toggleEditor, editing } = React.useContext(ManagerContext);

  return (
    <ButtonGroup size="sm">
      <IconButton
        className="rsuite-btn menu-button"
        onClick={() => toggleEditor(!editing)}
        icon={<Icon icon={toggleEditor ? "eye" : "edit2"} />}
      />
    </ButtonGroup>
  );
}