Learning React Portals

Just one of the things I'm learning. https://github.com/hchiam/learning

Basically inject a child component anywhere in the DOM, not necessarily into the current parent component. For example, if you want to inject content into a modal's DOM tree, but you want that content based on what's going on in the React tree parent of the "portalled" children (example). Note: events bubble into the DOM tree parent (example), but also bubble into the React tree parent (I like to think of it as from the code's point of view). Portals basically let you put the children HTML somewhere else/outside of the parent, but still have React take care of bubbling etc. as if it were the children (just look from the code point of view).

https://reactjs.org/docs/portals.html

render() {
  // this does not create a new div:
  return ReactDOM.createPortal(
    this.props.children, // put these children into:
    someElementThatCouldBeAnywhereInTheDOM
  );
}

Setup from scratch

npx create-react-app my-app
cd my-app
yarn
yarn start

Then set up the code like in commit 00b8ef.

Helpful reference with React hooks

https://stackoverflow.com/questions/53595935/how-can-i-make-react-portal-work-with-react-hook