import './styles.scss'; import { useState, useEffect, createContext, ReactNode, useContext } from 'react'; import { createPortal } from 'react-dom'; import { Button } from './components/button'; const ThemeContext = createContext('light'); const ThemeProvider = ({ children }: { children: ReactNode }) => { return {children}; }; const useTheme = () => useContext(ThemeContext); const ModalDialog = ({ onClose }: { onClose: () => void }) => { const theme = useTheme(); useEffect(() => { console.log('Theme should be dark, as set in context provider: ', theme); console.log('modal re-renders'); }); return (

Dialog should be in the middle of the screen

but it's not

); }; export default function App() { const [mainVisible, setMainVisible] = useState(true); const [isNavExpanded, setIsNavExpanded] = useState(true); const [showDialog, setShowDialog] = useState(false); return (

{ console.log('click inside the modal should be captured here'); console.log(e.target); }} >

Header is sticky

Hello CodeSandbox

Navigation links go here

{mainVisible && (

main part
{showDialog && createPortal( setShowDialog(false)} />, document.getElementById('root') as any)}

)}

); }

Chapter 13. Example 8