useRef "refers to a value, but is being used as a type here."

reactjs typescript react-hooks
Ilja picture Ilja · Apr 8, 2019 · Viewed 50.6k times · Source

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

enter image description here

Is there some universal way to define which element is ref?

Answer

Ishmeet Singh picture Ishmeet Singh · Dec 17, 2019

In my case, I renamed the file as .ts instead of .tsx. Renaming it again fixed it.

Related questions

Set types on useState React Hook with TypeScript

I'm migrating a React with TypeScript project to use hooks features (React v16.7.0-alpha), but I cannot figure out how to set typings of the destructured elements. Here is an example: interface IUser { name: string; } ... const [user, setUser] = useState({name: …

Read More
Testing React Functional Component with Hooks using Jest

So I'm moving away from class based components to functional components but am stuck while writing test with jest/enzyme for the methods inside the functional components which explicitly uses hooks. Here is the stripped down version of my code. …

Read More
Removing object from array using hooks (useState)

I have an array of objects. I need to add a function to remove an object from my array without using the "this" keyword. I tried using updateList(list.slice(list.indexOf(e.target.name, 1))). This removes everything but the …

Read More