forwardRef with typescript React

Question

I am trying to use the forwardRef in typescript React to access a child state. I've followed examples online but many are for javascript. I'm getting compiler errors with this.

This is the simplest version I can come up with and the compiler doesn't like the console log. It says ref.current may be undefined, so I've used some && logic but now it says getMyState() does not exist on type 'never'. I've also looked up that error as I've seen it before but don't understand it in this context.

const Parent = () => {
  const ref = useRef();
  console.log(ref.current && ref.current.getMyState());
  return(
    <>
    <Child ref={ref}/>
    </>
  );
  
}
const Child = forwardRef((props, ref) => {
  const [item, setItem] = useState('hello');
  useImperativeHandle(ref, () => ({getMyState: () => {return item}}), [item]);

  return (
    <>
    bob
    </>
  );
})

Note: I've read the React docs, my use case is a valid one for forwardRef.

Why am I getting this error and how do I extract the state from the child?

Amila Senadheera · Accepted Answer · 2022-02-23 14:47:34Z

3

You need to define type for the ref with the form of functions you expose in the Child component.

Try like below.

type ChildHandle = {
  getMyState: () => string | null;
};

const Child = forwardRef((props, ref) => {
  const [item, setItem] = useState("hello");
  useImperativeHandle(
    ref,
    () => ({
      getMyState: () => {
        return item;
      }
    }),
    [item]
  );

  return <>bob</>;
});

const Parent = () => {
  const ref = useRef<ChildHandle>();
  console.log(ref.current && ref.current.getMyState());
  return (
    <>
      <Child ref={ref} />
    </>
  );
};

Example of using the handle of Child within Parent

edited Feb 23, 2022 at 14:47

answered Feb 22, 2022 at 18:56

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Amila Senadheera Over a year ago

@user2956284, check this out !!

user2956284 Over a year ago

This worked great thanks. Although I didn't expect the reference to be affected when the child is called multiple times. e.g. if I pass in a reference to child once and then call child 2 more times but without passing in a reference, the reference still changes. I wonder if there is a way around this as I'd like a separate reference for each instance. I can still work with this though :)

Amila Senadheera Over a year ago

what do you mean by "call child 2 more times"? If you create two Child elements then you should pass two separate refs to them.

user2956284 Over a year ago

My bad. I'm too tired and left in some code where it shouldn't be.

user2956284 Over a year ago

Is there a way to make it not also spit out undefineds? It's working great, but my refs quickly turn to undefined. I could work around it but wondering if there is a way to do it inside the return statement of the child.

|

Collectives™ on Stack Overflow

forwardRef with typescript React

1 Answer 1

Example of using the handle of Child within Parent

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Example of using the handle of Child within Parent

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related