I encountered an issue while attempting to pass a ref to a forwardedRef component. Below is the code for the forwardRef component:
interface ResultsConnectedProps {
sql: string;
}
export const ResultsConnected: FC<ResultsConnectedProps> = forwardRef(({ sql }, ref) => {
const [lastUpdateAt, setLastUpdateAt] = useState(0);
useImperativeHandle(ref, () => ({
runQuery: () => {
setLastUpdateAt(Date.now());
},
}));
...
});
After that, I tried to declare it in a parent component like this:
const resultsRef = useRef(null);
...
<ResultsConnected ref={resultsRef} sql={sql} />
This resulted in the following error message:
Type '{ ref: MutableRefObject<null>; sql: string; }' is not assignable to type 'IntrinsicAttributes & ResultsConnectedProps'.
Property 'ref' does not exist on type 'IntrinsicAttributes & ResultsConnectedProps'.ts(2322)
(property) ref: React.MutableRefObject<null>