Call function on 'window' DOM object created in dynamic script for a React component

Question

In a ReactJS component I need to call a function (via window object) defined through a dynamically created script. I have the following example for best understanding. This is a simplified code example:

File RFo.js:

//Generic helper function for create a script of only code (not src):
function SetScript(id, code) {
  if (!document.getElementById(id)) //Only if script not already exists
  {
    const script = document.createElement("script");
    script.type = 'text/babel'; 
    script.textContent = code;
    script.id = id;
    script.async = true;
    document.body.appendChild(script);
  }
}

//Calling this function outside of RFo component, it works!
SetScript("myScriptId", "function myFunc(v) { return v+1; }"); 

// RFo component    
export const RFo = () =>
 {
  //console debug
  console.log(document.getElementById("myScriptId")); //always shows the script created
  console.log(window["myFunc"]); //it works as SetScript function was called outside RFo component 
    
  return (
      <div>
        MyFunc result: {window["myFunc"](10)} 
      </div>
  );
}

My problem is that the call SetScript("myScriptId", "function myFunc(v) { return v+1; }"); I want to have it inside the RFo component (because script code could be sent as props). Example:

    // RFo component    
    export const RFo = () =>
     {
      //moved inside RFo component
      SetScript("myScriptId", "function myFunc(v) { return v+1; }");

      //console debug
      console.log(document.getElementById("myScriptId")); //always shows the script created
      console.log(window["myFunc"]); //shows 'undefined' as SetScript function is called inside RFo component 
        
      return (
          <div>
            MyFunc result: {window["myFunc"](10)} 
          </div>
      );
    }

If I put it inside of RFo component it doesn't work. I guess it should be something simple and conceptual, or could be a workaround. I am newbie to React and JS. I really appreciate your help.

Answer 1

I don't understand why you want to add new script component into DOM, that should be a bad practice, you can do this instead:

function SetScript(functionName, callback){
  window[functionName] = callback
}

and then to define global function inside react component:

export const RFo = () =>
{
  // Pass function to second parameter instead of string
  SetScript("myFunc", function myFunc(v) { 
    return v+1; 
  });

  // Print global function to console
  console.log(window["myFunc"])
        
  return (
    <div>
      MyFunc result: {window["myFunc"](10)} 
    </div>
  );
}

You can see it in codepen