Inject external HTML/JS in React Typescript

Question

So, I'm doing a little web app using React Typescript and I have one problem I'm unable to fix.

My app obtains from an external API (using a POST request) a plotly graph in text/html. What I need to do is to inject this HTML and JS in my React App in order to be displayed in the browser.

What is the best way to do this? I've tried different approaches and nothing seems to work. I think the HTML components are being rendered, but the JS isn't being executed.

I need to inject something using this structure. The code bellow is not completed.

<div>
<div id="div-1" class="plotly-graph-div" style="height:100%, width:100%">
Plotly.newPlot("div-1",...)
</div>
</div>

Thanks in advance :)

Try using dangerouslySetInnerHTML stackoverflow.com/questions/23616226/… — Alen.Toma
– Alen.Toma, Commented Dec 5, 2021 at 10:52
That's the solution I'm currently using. However, the JS is not executed. — k3nz0
– k3nz0, Commented Dec 5, 2021 at 11:24
can you add the HTML and CSS responses in the question as well — Himanshu Singh
– Himanshu Singh, Commented Dec 5, 2021 at 13:07
The problem lies within the JS code not being executed. At list I think the parent divs render properly. — k3nz0
– k3nz0, Commented Dec 6, 2021 at 13:50

Alen.Toma · Accepted Answer · 2021-12-06 16:02:24Z

1

try loading the html dynamically then.

const divElement = useRef();
useEffect(() => {
  if (divElement.current)
    divElement.current.innerHTML = "Your html and js will be executed"
}, [])

return ( <
  div className = "test"
  ref = {divElement}>
  </div>
)

edited Dec 6, 2021 at 16:02

answered Dec 5, 2021 at 13:05

Alen.Toma

4,8782 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

k3nz0 Over a year ago

I'm using functional components within React Typecsript, I'm unable to do that.

Alen.Toma Over a year ago

I edited my answer and added a functional components. Have a look

k3nz0 Over a year ago

Thank you very much for your answer. However when I tried that, the problem persists. The parent divs are rendered, but the plotly.js Javascript inside isn't executed.

Alen.Toma Over a year ago

This should have worked, then it is something to do with your js file

k3nz0 Over a year ago

For example. Your code injects the HTML correctly. But if I try to do something like this divElement.current.innerHTML = '<div><script>console.log("Hello world!")</script></div>'; when I open my console i don't see any console.log. In other words, the js isn't being executed. What am I doing wrong?

|

Collectives™ on Stack Overflow

Inject external HTML/JS in React Typescript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related