Adding variable to script tag in React

Question

I need to construct some script tags that has variables with params that comes back from an API response. The variables needs to be available in the HTML so it can be accessed after page load. One example of a script needed would be something like this.

<script type="text/javascript">var test_var = "test123";</script>

The current implementation that I have is this

useEffect(() => {
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.innerHTML = `var test_var = ${testId};`;
  document.body.appendChild(script);
  return () => {
    document.body.removeChild(script);
  }
}, []);

By doing it that way will the variable be accessible in the HTML of the page since I am technically just setting the whole thing as a string in the script.innerHTML? Upon inspect element it pretty much just shows as

<script type="text/javascript">var test_var = test123;</script>

Tareq · Accepted Answer · 2020-10-26 23:11:44Z

2

Why don't you add it to the window object directly ? Use namespace it to minimise the pollution of the window object

useEffect(() => {
  const MyNameSpace = {
    test_var: testId,
  };
  
  window.MyNameSpace = MyNameSpace;

  return () => {
    delete window.MyNameSpace;
  }
}, []);

Then it will be available to read using window.MyNameSpace or just MyNameSpace in the global scope. You can also use sessionStorage or localStorage

Update

useEffect(() => {
  const newScript = document.createElement("script");
  newScript.setAttribute('type', 'text/javascript');
  const inlineScript = document.createTextNode(`var test_var=${testId}`);
  newScript.appendChild(inlineScript); 
  document.head.appendChild(newScript);

  return () => {
    window.head.removeChild(newScript)
  }
}, []);

edited Oct 26, 2020 at 23:11

answered Oct 26, 2020 at 21:15

Tareq

5,3732 gold badges18 silver badges18 bronze badges

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

2 Comments

steven5210 Over a year ago

My initial implementation I just added the params that was needed by the third party into the window object directly like what you showed. But they insist that it I have to inject the scripts into the HTML(DOM) inside the body tag. I am not sure of their reasoning behind this.

Tareq Over a year ago

Updated the answer based on that

Collectives™ on Stack Overflow

Adding variable to script tag in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related