0
292
VistasReactDOM.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?
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;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta