In my Next.js project I have a script that renders a widget as follows:
<a
className="e-widget no-button xdga generic-loader"
href="https://example"
rel="nofollow"
>
3 lucky winners stand a chance to win…
</a>
<Script
type="text/javascript"
src="https://widget.gleamjs.io/e.js"
strategy="afterInteractive"
></Script>
The problem is that once this script executes on the initial render, it does not execute again later.
Anyone know how I can get the script to execute multiple times?
The issue might be originating from other parts but you can give this a shot:
import React, { FC } from "react";
import Script from "next/script";
interface Props {
id: string;
}
const Widget: FC<Props> = ({ id }) => {
return (
<>
<a
className="e-widget no-button xdga generic-loader"
href="https://example"
rel="nofollow"
>
3 lucky winners stand a chance to win…
</a>
<Script
id={id}
src="https://widget.gleamjs.io/e.js"
strategy="afterInteractive"
/>
</>
);
};
export default Widget;
I managed to solve the problem by forcing the parent component to re-mount, which then causes my Script tag to re execute/render as desired.