'Transforming plain text into HTML not working in React

I'm trying to use some code from Tableau.com which embeds a report on a page. That HTML code is saved in the DB as text and I want to convert it into HTML in the frontend on a React application but the problem is that the code is now working even though the plain/text is converted into HTML successfully. I think the problem comes from the I tried to put some console.logs in there and they are not being executed, and the report is not being loaded. I tried to run the embedded code alone in a separate file and it's working fine but in React something is not right. Anyone can help me?

This is a React code sample

import './App.css';

function App() {
  const embedCode = "<div class='tableauPlaceholder' id='viz1646642304233' style='position: relative'><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='RegionalSampleWorkbook&#47;Storms' /><param name='tabs' value='yes' /><param name='toolbar' value='yes' /><param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en-GB' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1646642304233');                    var vizElement = divElement.getElementsByTagName('object')[0];                    vizElement.style.width='800px';vizElement.style.height='650px';                    var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>";

  return (
    <div className="App">
      <header className="App-header">
        <div dangerouslySetInnerHTML={{__html: embedCode}}/>
      </header>
    </div>
  );
}

export default App;



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source