Building a Modal as a Layout Component

Hands-on practice for this lecture. Write the code, see it run, understand the pattern.

Exercise 1 of 1

Modal Pattern Quiz

Three questions on the modal layout component: event propagation, controlled vs uncontrolled state, and why content components do not need to know about their container.

start here, then build the fix

Question 1

<ModalBackground onClick={() => setShow(false)}>
  <ModalContent onClick={e => e.stopPropagation()}>
    <button onClick={() => setShow(false)}>Close</button>
    {children}
  </ModalContent>
</ModalBackground>

What happens if you remove e.stopPropagation() from ModalContent?

Question 2

const Modal = ({ children }) => {
  const [show, setShow] = useState(false);
  ...
};

The Modal component manages its own open/close state. What does this make it?

Question 3

<Modal>
  <DetailedUserRow user={users[0]} />
</Modal>

Does DetailedUserRow need to know it is inside a Modal?

0 / 3 answered

Re-read the lecture All lectures →