I want to load Script tag after data.post.content is loaded inside HTML.
Basically, I want to run the MathJax.js script inside HTML.
My code:
return (
<div>
<h1>{data.post.title}</h1>
<p dangerouslySetInnerHTML={{ __html: data.post.content }}></p>
<Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/>
</div>
);
My Script is working if I reload the page
The problem here is you're populating Script with client-side rendering (server-side rendering is good because data is loaded already on the server).
You can try this way to fix (below snippet), but with this way, you need to set data.post.content in states for UI re-rendering
return (
<div>
<h1>{data.post.title}</h1>
<p dangerouslySetInnerHTML={{ __html: data.post.content }}></p>
{data.post.content && <Script type="text/javascript" src="https://www.hostmath.com/Math/MathJax.js?config=OK" strategy="afterInteractive"/>}
</div>
);