Can a React portal be used in a Stateless Functional Component (SFC)?

Question

I have used ReactDOM.createPortal inside the render method of a stateful component like so:

class MyComponent extends Component {
    ...
    render() {
        return (
            <Wrapper>
                {ReactDOM.createPortal(<FOO />, 'dom-location')}
            </Wrapper>
        )
    }
}

... but can it also be used by a stateless (functional) component?

Answer 1

Will chime in with an option where you dont want to manually update your index.html and add extra markup, this snippet will dynamically create a div for you, then insert the children.

export const Portal = ({ children, className = 'root-portal', el = 'div' }) => {
  const [container] = React.useState(() => {
    // This will be executed only on the initial render
    // https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
    return document.createElement(el);
  });

  React.useEffect(() => {
    container.classList.add(className)
    document.body.appendChild(container)
    return () => {
      document.body.removeChild(container)
    }
  }, [])

  return ReactDOM.createPortal(children, container)
}

Answer 2

It can be done like this for a fixed component:

const MyComponent = () => ReactDOM.createPortal(<FOO/>, 'dom-location')

or, to make the function more flexible, by passing a component prop:

const MyComponent = ({ component }) => ReactDOM.createPortal(component, 'dom-location')

Answer 3

can it also be used by a stateless (functional) component ?

yes.

const Modal = (props) => {
      const modalRoot = document.getElementById('myEle');

      return ReactDOM.createPortal(props.children, modalRoot,);
    }

Inside render :

render() {
    const modal = this.state.showModal ? (
      <Modal>
        <Hello/>
        </Modal>
    ) : null;

    return (
      <div>
      <div id="myEle">
        </div>
      </div>
    );
  }

Working codesandbox#demo