How to update the State of a component in ReactJS ?

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 fileimport 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 fileimport 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:
 
saurabh1990aror
Blogathon-2021
Picked
React-Questions
Blogathon
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Python program to convert XML to Dictionary
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
How to toggle password visibility in forms using Bootstrap-icons ?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components