Skip to content
Related Articles

Related Articles

How to update parent state in ReactJS ?

Improve Article
Save Article
  • Last Updated : 22 Dec, 2020
Improve Article
Save Article

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


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 (
          // Passing a function to child
class Child extends Component {
  render() {
    return (
        // Using parent props to update parent state
        onClick={() => this.props
            .updateState('parent state changed')}>
export default App;

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!