title: How to put raw html stored in variable inside a react component
body: <p>I'm using React CDN. I have an index php which loads some html and a small react component.</p>
  <p>From the React component, I'm trying to get an element from index.php and include it in my small React component. The reason it has to go this clumsy route is because that element is being modified from some jquery scripts somewhere.</p>
  <p>So, what I did is to use getElementById to get the element and store it in a variable.</p>
  <p>The problem I'm facing is that once I use it in my React component, it gets converted to a string and the output is like this <code>[object SVGSVGElement]</code>.</p>
  <p>I have tried React's _dangerouslySetInnerHTML and ReactHTMLParser and even putting it directly.</p>
  <p>Here's what I have when logged before and after adding it to my React component</p>
  <p>Before:
  <a href="https://i.stack.imgur.com/AZaJx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AZaJx.png" alt="enter image description here" /></a></p>
  <p>After:
  <a href="https://i.stack.imgur.com/IihHQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IihHQ.png" alt="enter image description here" /></a></p>
  <p>Relevant code</p>
  <p>In React component constructor</p>
  <pre><code>const dailyChart = document.getElementById('dailySa2Box')
  this.dailychart.push(dailyChart);
  </code></pre>
  <p>In render</p>
  <pre><code>&lt;React.Fragment &gt;
     {
        this.dailychart.map(chart=&gt;(
           HTMLReactParser(chart)
        ))
      }
   &lt;/React.Fragment&gt;
  </code></pre>