Type React component with ref? Typescript

Question

So I have a ref:

someComponent;

And the someComponent is basically a React component that looks like:

class SomeComponent<IProps> {
   getData = () => {};

   render() {
      ...some stuff
   }
}

So, how can I type someComponent so if I do:

this.someComponent.getData();

The TypeScript won't shout that getData doesn't exist on this.someComponent?

I tried:

someComponent: React.RefObject<SomeComponent<IProps>>

But TypeScript still warns me.

Edit: Tried with createRef, however getting following error:

in order to use getData outside that component, you need to pass it as prop — Prakash Reddy Potlapadu
– Prakash Reddy Potlapadu, Commented Mar 6, 2020 at 21:32
Where is your ref? Do you mean ref as the react concept, or as the general concept of reference? — Anthony Garcia-Labiad
– Anthony Garcia-Labiad, Commented Mar 8, 2020 at 22:25

Anthony Garcia-Labiad · Accepted Answer · 2020-03-08 23:29:16Z

4

+100

You need to specify the type of the component when you declare the ref in the parent component:

someComponent = React.createRef<SomeComponent>();

And pass the ref to the rendered component:

<SomeComponent ref={this.someComponent} />

Then you can call getData like this:

if (this.someComponent.current !== null) {
  this.someComponent.current.getData()
}

answered Mar 8, 2020 at 23:29

Anthony Garcia-Labiad

3,7511 gold badge28 silver badges33 bronze badges

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

4 Comments

Anthony Garcia-Labiad Over a year ago

I've created a code sandbox: codesandbox.io/s/…

Patrickkx Over a year ago

Thank you, however it really doesnt let me to use SomeComponent as a type. Check my edit. Whats going on?

Anthony Garcia-Labiad Over a year ago

Odd, could you share a repro on code sandbox? Maybe try createRef<typeof SomeComponent>, although it shouldn't be necessary in this case.

Patrickkx Over a year ago

Ok Anthony, the problem was the SomeComponent was connected with redux and the ref was forwared. However I decided to disconnect that component from store and it seems to work properly now. Thanks

Collectives™ on Stack Overflow

Type React component with ref? Typescript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related