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

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>
);
}