Call child component's method from parent component in React

How to call a method of child component from parent component?

  Shubham Verma      August 30, 2020


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:



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.




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.


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.



Solution 5:

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



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.


Support our IDKBlogs team


Welcome to IDKBlogs.

If our contents help you and you learned from this platform, please consider supporting what we do.

Thank you.




Strongly Recommended Books For You:

Reading books opens the door to allow in more lights, If we want to know a man of rare intellect, try to know what books he/she reads.

For India:

For Other Countries (United States, United Kingdom, Spain, Italy, Germany, France, Canada, etc)


Thank you

I appreciate you taking the time to read this article. The more that you read, the more things you will know. The more that you learn, the more places you'll go. If you’re interested in Node.js or JavaScript this link will help you a lot.

If you found this article is helpful, then please share this article's link to your friends to whom this is required, you can share this to your technical social media groups also. You can follow us on our social media page for more updates and latest article updates.
To read more about the technologies, Please subscribe us, You'll get the monthly newsletter having all the published article of the last month.








Funny Programming | Idkblogs.com | Shubham Verma

👈

Enjoyed this moment?