Is it possible to use dom element(s) as children in JSX when rendering a component? I think this explains what I'm attempting but is invalid.
<div id="container">
<div>node 1</div>
<div>node 2</div>
</div>
const container = document.querySelector('#container');
ReactDOM.render(
<MyComponent>{container.children}</MyComponent>,
container
);
Yes, it is possible using dangerouslySetInnerHTML, but it is not recommended.
From the docs:
dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.
const {useState, useEffect} = React;
function App(){
const [html, setHtml] = useState('Loading...');
useEffect(()=>{
setHtml(document.querySelector('#container').innerHTML);
}, []);
return <div dangerouslySetInnerHTML={{__html: html}}/>;
}
ReactDOM.render(
<App/>,
document.querySelector('#app')
);#container {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.5/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.5/umd/react-dom.production.min.js"></script>
<div id='app'></div>
<div id="container">
<div>node 1</div>
<div>node 2</div>
</div>Hope this helps!