CODEWITHSUNDEEP
reactjs
Rajan Gupta
Rajan Gupta

Reputation: 151

Call child component method from parent component in reactjs

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.

Upvotes: 14

Views: 34125

Answers (5)

Sarat Chandra
Sarat Chandra

Reputation: 6120

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>
  );
};

Upvotes: 8

user7396942
user7396942

Reputation:

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);

  };

Upvotes: 1

user12575635
user12575635

Reputation:

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

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281626

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 (
           {/*...*/}
      )
   }
}

Upvotes: 3

Garry Taylor
Garry Taylor

Reputation: 1115

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

Upvotes: 3

Related Questions