How to cast an HTMLElement to a React element? - reactjs

Question

I am working on a React application that uses an external library in Vanilla JS that creates DOM elements using document.createElement(...), some of this data I want to insert into my React elements. If I have a simple application:
let sub = React.createElement('p', null, 'Made with React'),
main = React.createElement('div', null, [sub])
React.render(main, document.getElementById('app'));
It renders with the content <p data-reactid=".0.0">Made with React</p>. If I try it with document.createElement instead, nothing is rendered.
let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', null, [sub])
React.render(main, document.getElementById('app'));
I have currently found a workaround using dangerouslySetInnerHTML.
let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', {dangerouslySetInnerHTML: {__html: sub.outerHTML}});
React.render(main, document.getElementById('app'));
Which renders but this doesn't seem safe. What is the proper way to append HTMLElement as React child elements?

Answer 1

Here's an elegantly simple solution I discovered to include vanilla HTML Elements to a React project using refs:
class Container extends React.Component {
render() {
return <div ref={ ref => ref.appendChild(this.props.child) }></div>;
}
}
Assume you have a vanilla paragraph element you want to display:
const para = document.createElement('p');
para.innerText = 'Hello world!';
Just create a container for it like this to render alongside your other React elements:
<Container child={ para }/>

Answer 2

dangerouslySetInnerHTML can be used safely with HTML sanitizers. Lots of libraries are available to prevent XSS.
React.createElement() returns virtual dom javascript object, document.createElement() returns dom object.
We are using javascript objects to manage to diff efficiently and update costly dom, we would not want to fallback to dom elements unless explicitly needed,