Black BeltarchitecturelockPREMIUM

Component Mounted via createRoot Loses Access to Parent React Context

A tooltip is mounted imperatively into a fresh DOM node rather than through the existing component tree.

REACT_MODULE // 0x42

const ThemeContext = createContext('dark');
function App() {
return (
<ThemeContext.Provider value="light">
<MainUI />
<button onClick={mountTooltipPortal}>Open Tooltip</button>
</ThemeContext.Provider>
);
}
function mountTooltipPortal() {
const node = document.createElement('div');
document.body.appendChild(node);
const root = createRoot(node);
root.render(<Tooltip />);
}
function Tooltip() {
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
}

What value does Tooltip read for theme?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.

CONTINUE DRILLarrow_forward