I'm implementing a link in React and TypesSript that, after clicking, scrolls to the right component, I'm using useRef Hook.
But when I do that, the error occurs:
Type '{ ref: MutableRefObject<HTMLDivElement | null>; }' is not assignable to type 'IntrinsicAttributes'.
Property 'ref' does not exist on type 'IntrinsicAttributes'.
Below is the code, what am I doing wrong? I've tried several ways.
import NewComponent from '../NewComponent';
const titleRef = useRef<null | HTMLDivElement>(null);
const handleBackClick = (): any => {
titleRef!.current!.scrollIntoView({ behavior: 'smooth' });
};
return (
<Container>
<Link onClick={handleBackClick}>
Button Text
</Link>
...
...
...
<SomeComponents />
...
...
...
...
<NewComponent ref={titleRef} />
</Container>
)
The NewComponent is a simple component, like:
const NewComponent = () => {
return (
<Container>
// Its a simple component
</Container>
);
};
export default NewComponent;
Thanks to anyone who can help me with this!
You would wanna use forwardRef to tell TypeScript that NewComponent can accept a ref that will hold a div element. Here is how you would do it as an example:
import { forwardRef } from "react";
const NewComponent = forwardRef<HTMLDivElement>((props, ref) => {
return <div ref={ref}>{props.children}</div>;
});
import { useRef } from "react";
export default function App() {
const titleRef = useRef<HTMLDivElement>(null);
return (
<div>
<NewComponent ref={titleRef} />
</div>
);
}
I created this CodeSandbox if you wanna play with it. Also notice I change useRef<null | HTMLDivElement>(null) to useRef<HTMLDivElement>(null).
In React, ref can only attach to DOM, if you want to pass it to your react component, you should use forwardRef
you can find more detail here https://reactjs.org/docs/react-api.html#reactforwardref