import './styles.scss'; import { useState, useEffect, createContext, ReactNode, useContext, useRef } 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 (

Just a dialog

); }; export default function App() { const ref = useRef(null); const [mainVisible, setMainVisible] = useState(true); const [isNavExpanded, setIsNavExpanded] = useState(true); const [showPortalDialog, setShowPortalDialog] = useState(false); const [showDialog, setShowDialog] = useState(false); useEffect(() => { const el = ref.current; if (!el) return; const listener = (e) => { console.log("Click events from the modal won't be captured here", e.target); }; el.addEventListener('click', listener); return () => el.removeEventListener('click', listener); }, []); const onFormSubmit = (e) => { e.preventDefault(); console.log('form submit initiated! But not from the dialog :('); }; 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
{showPortalDialog && createPortal( setShowPortalDialog(false)} />, document.getElementById('root') as any)} {showDialog && setShowDialog(false)} />}

)}

); }

Chapter 13. Example 9