'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/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 |
|---|
