How to cast an HTMLElement to a React element?

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'));

This renders but 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 }/>