13

I have requirement to call child component method from parent component in reactjs. I have tried using refs but not able to do it. Can anyone please suggest any solution. Thanks.

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
Rajan Gupta
  • 141
  • 1
  • 1
  • 4
  • Possible duplicate of [Call child method from parent](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) – Nisarg Shah Sep 03 '19 at 07:23
  • Although I'm very late to this, I'm also learning React so I'm curious about the case in which a parent would need to call child method. Would you care to explain? – Akshay Raut Nov 26 '19 at 08:20

5 Answers5

7

If using React Hooks, you can make use of useRef and useImperativeHandle hooks.

In the child component, add the functions in the hook.

const Child = forwardRef((props, ref) => {

  const printSomething = () =>{
     console.log('printing from child function')
  }
  useImperativeHandle(ref, () => ({
    printSomething: printSomething
  }));

  return <h1>Child Component</h1>;
});

Call the exposed function from the parent with the ref.

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.printSomething()}>Click</button>
    </div>
  );
};
Sarat Chandra
  • 5,636
  • 34
  • 30
5

Don't :)

Hoist the function to the parent and pass data down as props. You can pass the same function down, in case the child needs to call it also.

https://facebook.github.io/react/docs/lifting-state-up.html

Garry Taylor
  • 940
  • 8
  • 19
3

You can assign a ref to the child component and then call the function form parent like

class Parent extends React.Component {
   callChildFunction = () => {
       this.child.handleActionParent();  ///calling a child function here
  } 
   render(){
      return (
           <div>
           {/* other things */}
           <Child ref={(cd) => this.child = cd}/>
           </div>
      )
    }
}

class Child extends React.Component {
   handleActionParent = () => {
       console.log('called from parent')
   }
   render() {
      return (
           {/*...*/}
      )
   }
}
Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
1

You can pass registerCallback props to your child and call it from componentDidMount and pass reference to your child component method, then you can call it method at anytime

1

in your parent you can create a reference

in the constructor:

 this.child = React.createRef();

in any function:

execute=(comment)=>{
        this.child.current.addComment();
    }

render(){
        return (
            <div>
                <Messages ref={this.child} comment={this.state.comment}/>
            </div>
        )
    }

and in the Message(child) component

addComment=()=>{
    console.log("Pi ", this.props);

  };