I have been trying to use createElement inside an if statement but it just doesn't work. The headerLink is not recognized outside of the if statement.

Can someone explain what's missing?

What I have tried so far:

1. Declaring headerLink outside the if statement. This doesn't work

2. If I move the appendChild and removeChild inside the if statement, it starts to work. But, that would result in duplicate code since I will need to copy the same inside the else statement

   React.useEffect(() => {
       const head = document.head;
       const scriptType = "text/css";
   
   
       if (scriptType === "text/css") {
           const headerLink = document.createElement( "link" );
       } else {
           const headerLink = document.createElement( "script" ); 
       }
   
   
       // this line doesn't work - headerLink is not recognized
       head.appendChild(headerLink);
   
       return () => {  
           // this line doesn't work - again, headerLink is not recognized
           head.removeChild(headerLink);
       };
   }, []);
   

CodePudding user response：

You can move the declaration of the headerLink outside the if clause. But you will have to use let in that case.

let headerLink;

if (scriptType === "text/css") {
    headerLink = document.createElement( "link" );
} else {
    headerLink = document.createElement( "script" ); 
}

Or you can use ternary conditional operator to create element

const headerLink = document.createElement( scriptType === "text/css" ? "link" : "script" );

CodePudding user response：

Building upon Aditya's answer and Sandil's comment above, resolved the issue

useEffect(() => {

        const head = document.head;

        let headerScript: HTMLLinkElement | HTMLScriptElement;

 

        if(scriptType === "text/css") {

            headerScript = document.createElement( "link" );

        } else {

            headerScript = document.createElement( "script" );

        }

        head.appendChild(headerScript);

 

        return () => {

            head.removeChild(headerScript);

        };

       

        

    }, []);