Skip to content
Related Articles

Related Articles

How to set Parent State from Children Component in ReactJS?
  • Difficulty Level : Medium
  • Last Updated : 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 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:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :