How to set Parent State from Children Component in ReactJS? - GeeksforGeeks

27 Jan, 2021
We can set Parent State from Children Component in ReactJs using the following approach.
Prerequisite: State introduction in ReactJS
We will actually set the state of a parent in the parent component itself, but the children will be responsible for setting.
We will create a function in parent to set the state with the given input.
We will pass that function in children as a prop.
Then Children will call the function with a new Value.
We will set the state of the parent in the function.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder, i.e., folder name, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Project Structure
Step 3: Now create Parent and Children components in the src folder with the following code.
Filename- Child.js:
Javascript
import React,{ Component }  from 'react';   class Child extends Component {    constructor(props) {    super(props);    this.handleClick.bind(this);  }      handleClick = () => {    // We will start the process of changing    // state of parent from Here...  }    render() {    return (        <button onClick={this.handleClick}>Reveal Title</button>    );  }}  export default Child;
Filename- Parent.js:
Javascript
import React,{ Component }  from 'react';import "./parent_css.css"  // Importing child component for renderingimport Child from './child';   class Parent extends Component {    constructor(props) {    super(props);    this.state = {title: ""};  }    render() {    return (        <React.Fragment>          // Rendering title of state initially empty.          <h1> {this.state.title} </h1>                      // Rendering child component here which           // contains only a button          <Child />        </React.Fragment>    );  }}  export default Parent;
Step 4: Create function setStateOfParent to set state of Parent in Parent component, also pass setStateOfParent function in children.
Filename- Parent.js:
Javascript
import React,{ Component }  from 'react';import "./parent_css.css"  import Child from './child';   class Parent extends Component {    constructor(props) {    super(props);    this.setStateOfParent.bind(this);    this.state = {title: ""};  }    // Creating below function to set state   // of this (parent) component.  setStateOfParent = (newTitle) => {    this.setState({title: newTitle});  }    render() {    return (        <React.Fragment>          <h1> {this.state.title} </h1>                      // Passing the setStateOfParent function           // in child as a prop          <Child setStateOfParent = {this.setStateOfParent}/>        </React.Fragment>    );  }}  export default Parent;
Step 5: Now access and call the setStateOfParent function in children whenever you want to set the state of the parent.
Filename- Child.js:
Javascript
import React,{ Component }  from 'react';   class Child extends Component {    constructor(props) {    super(props);    this.handleClick.bind(this);  }    handleClick = () => {    // Simply call the setStateOfParent function from     // prop and pass required argument    this.props.setStateOfParent("Geeks For Geeks");  }    render() {    return (        <button onClick={this.handleClick}>Reveal Title</button>    );  }}  export default Child;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Picked
Technical Scripter 2020
JavaScript
ReactJS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to filter object array based on attributes?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components