score:1

Accepted answer

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.

here is a working example how this could be done:

const {usestate, useeffect} = react;

function app(){
  const [data, setdata] = usestate("loading...");
  useeffect(()=>{
    const containerinnerhtml = document.queryselector('#element').innerhtml;   
    setdata(containerinnerhtml);    
  },[]);
  
  return <div dangerouslysetinnerhtml={{__html: data}}/>;
}

reactdom.render(<app/>,document.getelementbyid('app'));
#element {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id='app'></div>


<div id="element">
  <div>node 1</div>
  <div>node 2</div>
</div>

hope this helps!


Related Query

More Query from same tag