How to put raw html stored in variable inside a react component

Question

I'm using React CDN. I have an index php which loads some html and a small react component.

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.

So, what I did is to use getElementById to get the element and store it in a variable.

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 [object SVGSVGElement] .

I have tried React's _dangerouslySetInnerHTML and ReactHTMLParser and even putting it directly.

Here's what I have when logged before and after adding it to my React component

Before:

After:

Relevant code

In React component constructor

const dailyChart = document.getElementById('dailySa2Box')
this.dailychart.push(dailyChart);

In render

<React.Fragment >
   {
      this.dailychart.map(chart=>(
         HTMLReactParser(chart)
      ))
    }
 </React.Fragment>

Answer 1

This works.

{
    this.dailychart.map(chart=>(
       HTMLReactParser(chart.outerHTML)
    ))
}

It gives HTMLReactParser the string it needs without compromising the element.