Question

0

150

Views

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;

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-05T09:35:12.175Z

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.