Access to component method in reactjs not working [duplicate]

Question

I am trying to access a child method from the parent component. This is how the child code looks like

class child extends Component {

someMethod(v) {
// do something
}

render(){
return(
...
)
}
}

And this is the parent code

class Parent extends Component {
hoverOn(){
this._Child.someMethod(10);  // _Child is undefined here
}

render(){
return(
<div onMouseOver={this.hoverOn.bind(this)}>
<OtherChild ....>
<Child  ref={(Child) => { this._Child = Child; }} />
</div>
)
}
}

On hoverOn() I get an error telling me that _Child is undefined. How can I call someMethod() from the Parent Class?

Two things, your child component class names is child whereas it should be Child, other thing is that since you have onMouseOver event which may get triggered before the component is mounted and hence you can get an error so add a conditional check like this._Child && this._Child.someMethod(10); — Shubham Khatri
– Shubham Khatri, Commented Nov 23, 2017 at 9:30

Jeffin · Accepted Answer · 2017-11-23 09:25:30Z

0

try adding refs

class Parent extends Component {
hoverOn(){
    this.refs._Child.someMethod(10);
}}

edited Nov 23, 2017 at 9:25

answered Nov 23, 2017 at 9:24

Jeffin

1,19913 silver badges23 bronze badges

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

3 Comments

Shubham Khatri Over a year ago

The OP has added a ref using the callback method which is what is recommended in the docs

Jeff P Chacko Over a year ago

OP has used a better method than what you've suggested.

Jeffin Over a year ago

Oh sorry guys . I didnt see that he used a callback method

Collectives™ on Stack Overflow

Access to component method in reactjs not working [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related