How to access this.props.children functions in React

Question

Here is the component hierarchy I have.

<Parent>
    <Child1>
        <Child2>
        </Child2>
    </Child1>
<Parent>

In Child2 component, there is a function called handlePatch(). I need to call it from Parent component but not sure how to do it. What is the best approach for this?

Thanks.

Check this answer. https://stackoverflow.com/questions/37949981/call-child-method-from-parent — Juan Martin Gallo, Dec 01 '17 at 13:00

score 1 · Accepted Answer · answered Dec 01 '17 at 13:00

1

you could pass on a ref of the Child component to the Parent as props and access that to call the function like

class App extends React.Component {
    constructor() {
       super();
       this.child = null;
    }
    render() {
        return (
             <Parent childRef={this.child}>
                <Child ref={(ref) => this.child = ref}/>
             <Parent>
        )
    }
}

class Parent extends React.Component {
    myfunc = () => {
        //call child function
        this.props.childRef.handlePatch();
    }
}

However you can try to avoid it by restructuring your code a little better and directly calling the function in Child from the container of Parent component.

answered Dec 01 '17 at 13:00

Shubham Khatri

270,417
55
406
400

Thanks, Shubham. I've update the description for more complicated senario. can you let me know how? – Patrick Blind Dec 01 '17 at 15:17
It doesn't matter how nested the cmponents are, you could use the same approach – Shubham Khatri Dec 01 '17 at 15:39
Hi Shubham. sorry, is this the best approach? any work around via props, etc? – Patrick Blind Dec 06 '17 at 08:51
1

This is the simplest approach and the one which was suggested on one of the issues I was going through on github – Shubham Khatri Dec 06 '17 at 08:57

How to access this.props.children functions in React

1 Answers1