Call child component's method from parent component in React

Access or call child method from parent in React

C

alling a child component's method from parent component is very easy. In this article, we'll have a parent component and a child component, and we will call the child component's function from the parent component.

Solution 1:

In this what we'll do is, In the parent component, we'll have a state callChildReset and in this parent component, we'll update ( increment ) this state value using setState on the click of the Reset button.
And this state key callChildReset will be passed in Child component in the render method of the parent component. when the value of callChildReset gets to update the render function will call and the updated value of callChildReset will pe passed in Child component. And in the Child component, in componentDidUpdate lifecycle hook, we'll check if the props are updated then we'll call the child component's method reset.

Let's dive into the codes:

                            class Parent extends Component {
                    
                                state = {
                                  callChildReset: 0
                                }
                            
                                onHeaderReset = () => {
                    
                                  let reset = this.state.callChildReset;
                                  reset += 1;
                                  this.setState(() => ({ callChildReset: reset }))
                                }
                            
                                render() {
                    
                                  return (
                                    <>
                                      <Button
                                        onClick={() => this.onHeaderReset()}
                                      >Reset
                                      </Button>
                                      <Child
                                        callChildReset={this.state.callChildReset}
                                      />
                                    </>
                                  )
                                }
                            }
                          

                            class Child extends Component {
                    
                                componentDidUpdate = () => {
                    
                                    const { callChildReset } = this.props;
                                    if (callChildReset > 0) {
                                        this.reset()
                                    }
                    
                                }
                            
                                reset = () => {
                                    console.log('Called by parent');
                                };
                            
                                render() {
                                    return (
                                        <SomeComponent />
                                    )
                                }
                            }
                          

In the Child component, in componentDidUpdate(), the comparison is not happening in a standard way. To see the standard way of props comparison in componentDidUpdate() Click here.

---

Solution 2:

Let's have a look on other way to do this:

In this, to execute a function of a child component, you will need to use Refs. React supports a special attribute that you can attach to any component, Here we'll attach this with child component like ref="child" that's the ref attribute, it takes a callback function, and you can access the functions of the child component in the parent accessing this.refs.REF_NAME.METHOD_NAME.

                    
                          class Parent extends React.Component {
                    
                            callChildMethod(){
                                this.refs.child.childMethod();
                            }
                        
                            render() {
                                return (
                                    <div>
                                        {/* Note that you need to give a value to the ref parameter, in this case child*/}
                                        <Child ref="child" />
                                        <button onClick={this.callChildMethod}>Click</button>
                                    </div>
                                );
                            }
                        }
                      

                        class Child extends React.Component {
                          childMethod() {
                              alert('Hello World');
                          }
                      
                          render() {
                              return (
                                  <h1>Hello</h1>
                              );
                          }
                      }
                    

---

Solution 3:

Another way to Call Child Function From Parent Component In React is using useRef hook.
In this, we pass a reference called Ref to child component and will assign the ref of child component's function's ref to a vsriable.
Let's have a look on below codes.

                        const ParentComponent = () => {
                          const childFuncRef = React.useRef(null)
                    
                          return (
                            <>
                              <ChildComponent childFuncRef={childFuncRef} />
                              <button onClick={() => childFuncRef.current()}>Click me</button>
                            </>
                          )
                        }
                    
                        const ChildComponent = ({ childFuncRef }) => {
                          React.useEffect(() => {
                            childFuncRef.current = iAmChildFunc
                          }, [])
                    
                          function iAmChildFunc() {
                            alert('iAmChildFunc called!')
                          }
                    
                          return null
                        }
                    
                        render(<ParentComponent />);
                    

---

Solution 4:

Using Callback Ref API

In this solution we will use Callback Refs. The Callback Refs is another way to all call child component's method from parent component in React. But this Callback Refs is not common in modern React app development.
Let's call the child component's method from parent component in React using Callback Ref API.

                      const { Component } = React;
                      const { render } = ReactDOM;
                      
                      class ParentComponent extends Component {
                        render() {
                          return (
                            <div>
                              <ChildComponent ref={instance => { this.child = instance; }} />
                              <button onClick={() => { this.child.iAmChildFn(); }}>Click</button>
                            </div>
                          );
                        }
                      }
                      
                      class ChildComponent extends Component {
                        iAmChildFn() {
                          alert('clicked');
                        }
                      
                        render() {
                          return (
                            <h1>IDKBlogs</h1>
                          );
                        }
                      }
                    
                      render(
                        <ParentComponent />,
                        document.getElementById('app')
                      );
                    
                    

---

Solution 5:

Here is the another way to call child component's method from parent component in React.

                      class ParentComponent extends Component {
                        render() {
                         return (
                           <div>
                             <ChildComponent setClickFn={click => this.clickChild = click}/>
                             <button onClick={() => this.clickChild()}>Click</button>
                           </div>
                         );
                        }
                       }
                       
                       class Component extends Component {
                    
                        constructor(props) {
                           super(props);
                           this.iAmChildFn = this.iAmChildFn.bind(this);
                        }
                    
                        componentDidMount() {
                           this.props.setClickFn(this.iAmChildFn);
                        }
                    
                        iAmChildFn() {
                           alert('I am Clicked');
                        }
                    
                        render() {
                         return (
                           <h1 ref="hello">IDKBlogs</h1>
                         );
                        }
                       }
                    

---

Conclusion:

That's it, now we can call a child's component methods from the parent component.

In this article, we have learned so many ways to call a child's component methods from the parent component in React. We have seen how we can call a child's component methods from the parent component using parent state value, we have implemented so many ways how we can call a child's component methods from the parent component in React.