emplums

In React 17, event listeners are attached to the node that your React application is using as the root node, instead of the document. In the diagram above, that would be the div under body.

Previously, if you called e.stopPropagation in a React event handler (say the menu component in the diagram), the event would bubble up to the document anyways, and if you had a listener on the document it would get called.

emplums

emplums

// Text component
const Text  = ({ tag, fontSize, children}) => {
  // This has to be set as Tag here because JSX wants the tag name to be capitalized, but it renders down to <h1> anyways
  // Default to a <p> tag if no tag is set
  const Tag =  tag ? `${tag}` : 'p';
  return <Tag className={classnames(fontSize ? `f${fontSize}` : null)}>{children}</Tag>
}

export default Text