CodePark/ questions / Component patterns
START PRACTICINGPRACTICE
Frontend question · React › Component patterns

The modal is rendered into document.body with createPortal. When the user clicks the modal's button, does handleClick on the outer div run?

<div onClick={handleClick}>
  {createPortal(
    <Modal><button>OK</button></Modal>,
    document.body
  )}
</div>
Yes, because React events bubble through the React tree, not the DOM tree

Yes, handleClick runs. A portal changes only where the DOM nodes are placed. The portal's children are still React children of the div. React events bubble through the React tree, so the synthetic event reaches the div. Context also still flows into the modal.

"No, because in the DOM the button is not inside the div" is the tempting wrong answer. That would be true for native DOM listeners, but React events follow the React tree. Portals do not stop propagation either. Call e.stopPropagation() if you do not want the event to bubble.