0
240
ViewsuseRef "refers to a value, but is being used as a type here."
I'm trying to figure out how to tell react which element is being used as ref i.e. in my case
const circleRef = useRef<AnimatedCircle>(undefined);
AnimatedCircle is an SVG component from a third party library, and defining it this way causes error
Is there some universal way to define which element is ref?
3 answers
Answer question0
In my case, I renamed the file as .ts instead of .tsx. Renaming it again fixed it.
0
AnimatedCircle is a function, not a type. This means it cannot be used in TypeScript in place of a type, like in the generic constraint of useRef. Instead, you need to use the typeof operator to convert to a type:
const circleRef = useRef<typeof AnimatedCircle | null>(null);
0
I was getting the same error in
ReactDOM.render(
<App store={store} persistor={persistor} basename={PUBLIC_URL} />,
document.getElementById("root");
And I renamed the file to .tsx and that fixed the problem. The reason is that, when you are using React or ReactDOM, you have to rename file to .tsx instead of ts. For JavaScript, .js works but for TypeScript, .ts don't work.