Skip to content
Related Articles

Related Articles

Improve Article

How to update the State of a component in ReactJS ?

  • Difficulty Level : Medium
  • Last Updated : 27 Sep, 2021

The State is an instance of React Component that can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component. The state of a component can be updated during the lifetime.

Generally, there are two types of components in React. The Class Based Components and Functional Components. The method by which we can update the State of a component is different in these two types of components. We are going to learn them one by one.

Creating react application:

Step 1: Create a React application using the following command:

npx create-react-app name_of_the_app

Step 2: After creating the react application move to the directory as per your app name using the following command:



cd name_of_the_app

Project Structure: Now open your application folder in an editor. You will see the following file structure:

1. Update the State of Class-Based Components: Now we are going to learn how to update the state of a class-based component. The steps are discussed below.

  • Go inside the App.js file and clear everything.
  • At the top of the App.js file import React,{Component} from ‘react.
  • Create a Class based component named ‘App’. This is the default App component that we have reconstructed.
  • Create a state object named text, using this.state syntax. Give it a value.
  • Create another method inside the class and update the state of the component using ‘this.setState()’ method.
  • Pass the state object in a JSX element and call the method to update the state on a specific event like button click.

Example :

Filename: App.js

Javascript




// The App.js file
import React,{Component} from 'react';
 
class App extends Component {
  constructor(){
    super()
    this.state={
      text : 'Welcome to Geeksforgeeks'
    }
  }
 
  goPremium(){
    this.setState({
      text:'Subscription successful'
    })
  }
  render() {
      return (
          <div>
            <h1>{this.state.text}</h1>
            <button onClick={() => this.goPremium()}>
              Go Premium
            </button>
          </div>
      ); 
  }
}
 
export default App;

Step to run the application: Open the terminal and type the following command. 

npm start

Output:



2. Update the State of functional Components: The steps for updating the state of a functional component are given below.

  • Clear everything inside the App component of the App.js file.
  • At the top of the App.js file import React, {useState} from “react”.
  • Inside the App component create a state named ‘text’ using the following syntax. This is the built-in useState method for react functional components. :
const [state, setState] = useState({text:'Default value of the text state'});
  • Pass the ‘text’ state to the JSX element using ‘{state.text}’ method.
  • Update the state on a specific event like button click using the ‘setState’ method. The syntax is given below :
setState({text:'Updated Content'})

Example:

Filename: App.js

Javascript




// App.js file
import React, {useState} from "react";
  
function App(){
    const [state, setState] = useState({
      text:'Welcome to Geeksforgeeks'
    });
    return (
        <div>
            <h1>{state.text}</h1>
            <button onClick={() => setState({
              text:'Subscription successful'
              })}>
             Go Premium
            </button>
        </div>
    );
};
 
export default App;

 
Step to run the application: Open the terminal and type the following command. 

npm start

Output:

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :