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 rendering import 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:
