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:
Declaring headerLink outside the if statement. This doesn't work
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);
};
}, []);
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" );
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);
};
}, []);