title: Can I create a React Element from an HTML string or dom node/element
body: <p>I'm retrieving an HTML string from SharePoint and need to parse and modify the data and build a react element to be displayed in my react application. </p>
  
  <p>Basically, I have code (as string) returning to me in a format similar to: </p>
  
  <pre><code>"
  &lt;div&gt;
      &lt;div data-sp-canvasdataversion="1"&gt;This could be a header&lt;/div&gt;
      &lt;div data-sp-canvasdataversion="1"&gt;&lt;img src="titleimage.jpg"&gt;&lt;/div&gt;
      &lt;div data-sp-canvasdataversion="1"&gt;&lt;a href="pdfLink.pdf"&gt;This is a link to a PDF&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  "
  </code></pre>
  
  <p>and from that I need to cycle through the children and build a new React element containing some parts of what was returned and some new parts such as </p>
  
  <pre><code>&lt;div&gt;
      &lt;div data-sp-canvasdataversion="1"&gt;This could be a header&lt;/div&gt;
      &lt;div data-sp-canvasdataversion="1"&gt;&lt;img src="titleimage.jpg"&gt;&lt;/div&gt;
      &lt;PDFViewer file={""pdfLink.pdf""}&gt;&lt;/PDFViewer&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>I was originally using dangerouslySetInnerHTML which worked to simply display the data, but now i need to remove a chunk of the html, create a react element based on the data and inject the new element back into the code. Since i'm trying to insert a component now, vanilla html won't work.</p>
  
  <p>I'm able to cycle through the children by converting it to a dom node but I can't figure out how to use a dom node or element as a React Element Child.</p>
  
  <p>I've tried:</p>
  
  <pre class="lang-js prettyprint-override"><code>let element = React.createElement('div', {}, HTMLString); 
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>let node = document.createRange().createContextualFragment(HTMLString).firstChild;
  
  let element = React.createElement('div', {}, node); 
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>let node = document.createRange().createContextualFragment(HTMLString).firstChild;
  let node2 = document.createElement("div");
  node2.appendChild(node);
  node2 = node2.firstElementChild as HTMLDivElement;
  
  let element = React.createElement('div', {}, node2); 
  </code></pre>
  
  <p>None work as needed and give me the error <code>Objects are not valid as a React child (found: [object HTMLDivElement]).</code> or similar.</p>
  
  <p>What i need is something like:</p>
  
  <pre class="lang-js prettyprint-override"><code>let element = React.createElement('div'); 
  let node = document.createRange().createContextualFragment(HTMLString).firstChild;
  
  node.childNodes.forEach(child =&gt; {
      if(...//child IS NOT pdf)
          element.appendChild(child)
      else if(...//child IS pdf){
          ...
          element.appendChild(&lt;PDFViewer file="linktopdf.pdf"&gt;)
      }
  })
  </code></pre>
  
  <p>Then I would expect to be able to use that in render </p>
  
  <pre><code>render {
      ...
      return(
          &lt;div className="container"&gt;
              {element}
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>Please let me know if this is even possible and how. The only possible solution I could think of was maybe saving the child elements as strings and using dangerouslySetInnerHTML to generate all of them but I really want to get away from using dangerouslySetInnerHTML, especially like that.</p>