Skip to content
Related Articles

Related Articles

How to update parent state in ReactJS ?
  • Last Updated : 22 Dec, 2020

We can pass a function setting the state from the parent to the child component as a prop.

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. foldername, move to it using the following command:

cd foldername

Project Structure: It will look like the following.



Project Structure

Filename: App.js

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Component } from "react";
class App extends Component {
  
  state = {
    text: 'click me'
  }
  
  // Function to update state
  handleUpdate = (newtext) => {
    this.setState({ text: newtext })
  }
  
  render() {
    return (
      <div>
        <Child
          text={this.state.text}
  
          // Passing a function to child
          updateState={this.handleUpdate}>
        </Child>
      </div>
    );
  }
}
class Child extends Component {
  
  render() {
    return (
      <button 
        // Using parent props to update parent state
        onClick={() => this.props
            .updateState('parent state changed')}>
        {this.props.text}
      </button>
    )
  }
}
  
export default App;

chevron_right


Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: You will see the following button on the screen:

Before Click

After clicking on the button, the following will be the output:

After Click

react-js-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :