Call parent component method from a child component in React
In this post we will give you information about Call parent component method from a child component in React. Hear we will give you detail about Call parent component method from a child component in ReactAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to call a parent component method from the child component in React.
Consider, we have two new components Parent, Child and we need to call Parent component method changeName() from the Child component.
Parent Component
import React, { Component } from 'react';import Child from './Child';class Parent extends Component { state = { name: "Gowtham" } changeName = ()=>{ this.setState({ name: "James" }) } render() { return ( <div> <Child name={this.state.name}/> </div> ); }}export default Parent;Child Component
import React from 'react';function Child(props){ const {name} = props; return ( <div> <h1>Hello {name}</h1> <button>Change Name</button> </div> )}export default Child;Calling parent component method
To call a parent component method from the child component, we need to pass the changeName() method as a prop to the child component and access it as a props data inside the child component.
import React, { Component } from 'react';import Child from './Child';class Parent extends Component { state = { name: "Gowtham" } changeName = ()=>{ this.setState({ name: "James" }) } render() { return ( <div> <Child name={this.state.name} changeName={this.changeName}/> </div> ); }}export default Parent;In the above code, we have passed the changeName() method as a prop to the Child component.
Now, inside the Child component we can access the changeName() method from the props object.
import React from 'react';function Child(props){ const {name,changeName} = props; return ( <div> <h1>Hello {name}!</h1> <button onClick={changeName}>Change Name</button> </div> )}export default Child;If we click on a Change Name button the Parent component method changeName() is invoked and the name is changed from Gowtham to James.
Hope this code and post will helped you for implement Call parent component method from a child component in React. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs