React – useRef with TypeScript and functional component

I’m trying to call the child component method from the parent component using useRef.

In the future, the SayHi method will update the hook state in the child component. Unfortunately, I have bugs I can’t deal with.

Line: ref.current.SayHi();

Property ‘SayHi’ does not exist on type ‘ForwardRefExoticComponent<{ name: string; } & RefAttributes<{ SayHi: () => void; }>>’.

Line: <Child name="Adam" ref={ref}/>

Type ‘RefObject<ForwardRefExoticComponent<{ name: string; } & RefAttributes<{ SayHi: () => void; }>>>’ is not assignable to type ‘((instance: { SayHi: () => void; } | null) => void) | RefObject<{ SayHi: () => void; }> | null | undefined’.
Type ‘RefObject<ForwardRefExoticComponent<{ name: string; } & RefAttributes<{ SayHi: () => void; }>>>’ is not assignable to type ‘RefObject<{ SayHi: () => void; }>’.
Property ‘SayHi’ is missing in type ‘ForwardRefExoticComponent<{ name: string; } & RefAttributes<{ SayHi: () => void; }>>’ but required in type ‘{ SayHi: () => void; }’.

Full test.tsx file:

import React, { useRef, forwardRef, useImperativeHandle, Ref } from 'react'

const Parent = () => {
  const ref = useRef<typeof Child>(null);
  const onButtonClick = () => {
    if (ref.current) {
      ref.current.SayHi();
    }
  };
  return (
    <div>
      <Child name="Adam" ref={ref}/>
      <button onClick={onButtonClick}>Log console</button>
    </div>
  );
}

const Child = forwardRef((props: {name: string}, ref: Ref<{SayHi: () => void}>)=> {
  const {name} = props;
  useImperativeHandle(ref, () => ({ SayHi }));
  
  function SayHi() { console.log("Hello " + name); }
  
  return <div>{name}</div>;
});

I deeply ask for help on this topic.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You require to extract the ref type elsewhere:

interface RefObject {
  SayHi: () => void
}

then just refer to it in both places

const Child = forwardRef((props: {name: string}, ref: Ref<RefObject>)=> {
  const {name} = props;  
  useImperativeHandle(ref, () => ({ SayHi }));
  function SayHi() { console.log("Hello " + name); }

  return <div>{name}</div>;
});
const Parent = () => {
    const ref = useRef<RefObject>(null);
    const onButtonClick = () => {
      if (ref.current) {
        ref.current.SayHi();
      }
    };
    return (
      <div>
        <Child name="Adam" ref={ref}/>
        <button onClick={onButtonClick}>Log console</button>
      </div>
    );
}

Solution 2

Just replace the declaration of your ref with this const ref = useRef<{ SayHi: () => void }>(null);

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply