title: Add/inject React component into pure HTML that came from the back-end
body: <p>I have a pure HTML that came from the back-end. I want to include/inject/add React component into <code>div</code> with special <code>id</code> in that HTML and render it properly. Guess I should use <code>dangerouslySetInnerHTML</code>(or html-react-parser) and <code>ReactDOM.render</code>, but <code>ReactDOM.render</code> doesn't work inside a React component. Is there a way to do that. There is my suggestion, which doesn't seem right at all:</p>
  
  <pre><code>export default class MainBoard extends Component {
      constructor(props) {
      super(props);
      this.state = {content: { __html: "" }};
      };
      componentWillMount() {
      const dinamicHTML = { __html: "&lt;div class='dinamic-content'&gt;&lt;h4 class='content-header'&gt;Dinamic content header&lt;/h4&gt;&lt;div id='test-component'&gt;This content is dynamically added.&lt;/div&gt;&lt;/div&gt;" };
          this.setState({ content: dinamicHTML});
          ReactDOM.render(&lt;Menu /&gt;, document.getElementById('test-component'));
      }
      render() {
          return (
              &lt;div className="main-content-wrapper"&gt;
                  &lt;h3&gt;MainBoard&lt;/h3&gt;
                  &lt;div className="dinamic-content-wrapper" dangerouslySetInnerHTML={this.state.content} /&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>