javascriptreactjsreact-hooksreact-portal

ReactDOM.createPortal() renders empty element when called in a function


I have a simple React.js app that tries to render content in a Portal on a callback, does someone have any ideas why it isn't rendering anything?

Runnable CodeSandbox

import React from 'react'
import ReactDOM from 'react-dom'
import './App.css';

function App() {
  const showElement = React.useCallback(() => {
    const element = document.createElement('div');
    document.querySelector('body').appendChild(element)
    ReactDOM.createPortal(() => <div>TEST</div>, element)
  }, [])
  
  return (
    <div className="App">
      <button onClick={showElement}>Click to Render Portal</button>
    </div>
  );
}

export default App;

Solution

  • You aren't returning the created portal in the return of the App component, so it's not actually being rendered.

    Try something more like:

    function App() {
      const elementRef = useRef(document.createElement("div"));
    
      const showElement = React.useCallback(() => {
        document.querySelector("body").appendChild(elementRef.current);
      }, []);
    
      return (
        <div className="App">
          <button onClick={showElement}>Click to Render Portal</button>
          {ReactDOM.createPortal(<div>TEST</div>, elementRef.current)}
        </div>
      );
    }
    

    This creates a React ref to hold the created DOM element, renders the portal with the return of the component JSX, and appends the DOMNode in the button's onClick handler.

    Edit reactdom-createportal-renders-empty-element-when-called-in-a-function