How can a parent element invoke a function defined on a child element?

Question

If I have a class-based component:

class MyComponent extends React.Component {
    state = {...}
    constructor(props) {...}
    functionIWantToCall() {...}
    render() {...}
}

That is incorporated into the DOM something along the lines of:

<div id="parent-div-with-controls">
  .... (some control elements) ....
  <MyComponent {...props}/>
</div>

Is there a way that I can call a method defined in MyComponent from parent-div-with-controls?

I'm imagining the 'react equivalent' (if such a thing exists) of this:

const myComponent = new MyComponent()
myComponent.functionIWantToCall()

Or alternatively, is this something that I would never want to do in React?

You mean calling child component method from parent? why would you do that? — Just code, Jan 10 '19 at 09:58

score 0 · Accepted Answer · answered Jan 10 '19 at 10:03

0

You can use a ref to have a "connection" with the instance in MyComponent:

In your parent component, do something like:

class Parent extends React.Component {

  innerComponentInstance = React.createRef()

  // sample place where to "contact" the child component
  componentDidUpdate() {
    this.innerComponentInstance.functionIWantToCall()
  }

  render() {
    <MyComponent ref={ this.innerComponentInstance } />
  }

}

answered Jan 10 '19 at 10:03

0xc14m1z

3,675
1
14
23

Thank you - now I see what refs are for – Zach Smith Jan 10 '19 at 10:15

How can a parent element invoke a function defined on a child element?

1 Answers1