ReactJS setState()
setState is a method used in React class components to update the component’s state that triggers a re-render with the updated values. All the React components can have a state associated with them. The state of a component can change either due to a response to an action performed by the user or an event triggered by the system.
We use the setState() method to change the state object. It ensures that the component has been updated and calls for re-rendering of the component.
Table of Content
React JS setState
setState in React is an asynchronous call means if a synchronous call gets called it may not get updated at the right time like to know the current value of an object after an update using setState it may not give the updated value on the console. To get some behavior for synchronous need to pass function instead of object to setState.
To deepen your knowledge of state management and other advanced React concepts, consider enrolling in the React JS Course offered by GeeksforGeeks. This course provides a comprehensive overview of state management techniques, including hooks like useState and useReducer, allowing you to manage state more effectively in functional components. With hands-on projects and practical applications, you’ll gain the skills necessary to build robust React applications.
Syntax:
We can use setState() to change the state of the component directly as well as through an arrow function.
setState({ stateName : updatedStateValue })
// OR
setState((prevState) => ({
stateName: prevState.stateName + 1
}))
Steps to Create React Application
Step 1: Create a React application using the following command:
npx create-react-app foldernameStep 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldernameProject structure:
Approach 1: Updating single attribute
We set up our initial state value inside constructor function and create another function updateState() for updating the state. Now when we click on the button, the latter gets triggered as an onClick event which changes the state value. We perform setState() method in our updateState() function by writing:
this.setState({
greeting : 'GeeksForGeeks welcomes you !!'
})
As you can see, we are passing an object to setState(). This object contains the part of the state we want to update which, in this case, is the value of greeting. React takes this value and merges it into the object that needs it. It’s just like the button component asks what it should use for updating the value of greeting and setState() responds with an answer.
// Filename - App.js
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
// Set initial state
this.state = {
greeting:
"Click the button to receive greetings",
};
// Binding this keyword
this.updateState = this.updateState.bind(this);
}
updateState() {
// Changing state
this.setState({
greeting: "GeeksForGeeks welcomes you !!",
});
}
render() {
return (
<div>
<h2>Greetings Portal</h2>
<p>{this.state.greeting}</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
);
}
}
export default App;
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:
Approach 2: Updating multiple attributes
The state object of a component may contain multiple attributes and React allows using setState() function to update only a subset of those attributes as well as using multiple setState() methods to update each attribute value independently.
We set our initial state by initializing three different attributes, and then we create a function updateState() which updates its value whenever it is called. Once again this function gets triggered as an onClick event and we get the updated values of our states at the same time.
// Filename - App.js
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
// Set initial state
this.state = {
test: "Nil",
questions: "0",
students: "0",
};
// Binding this keyword
this.updateState = this.updateState.bind(this);
}
updateState() {
// Changing state
this.setState({
test: "Programming Quiz",
questions: "10",
students: "30",
});
}
render() {
return (
<div>
<h2>Test Portal</h2>
<p>{this.state.test}</p>
<p>{this.state.questions}</p>
<p>{this.state.students}</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
);
}
}
export default App;
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:
Approach 3: Updating state values using props
We set up an array of strings testTopics as props for our component. A function listOfTopics is created to map all the strings as list items in our state topics. The function updateState gets triggered and sets the topics to list items. When we click on the button, we get updated state values. This method is well-known for handling complex data and updating the state very easily.
// Filename - App.js
import React, { Component } from "react";
class App extends Component {
static defaultProps = {
testTopics: [
"React JS",
"Node JS",
"Compound components",
"Lifecycle Methods",
"Event Handlers",
"Router",
"React Hooks",
"Redux",
"Context",
],
};
constructor(props) {
super(props);
// Set initial state
this.state = {
testName: "React js Test",
topics: "",
};
// Binding this keyword
this.updateState = this.updateState.bind(this);
}
listOfTopics() {
return (
<ul>
{this.props.testTopics.map((topic) => (
<li>{topic}</li>
))}
</ul>
);
}
updateState() {
// Changing state
this.setState({
testName: "Test topics are:",
topics: this.listOfTopics(),
});
}
render() {
return (
<div>
<h2>Test Information</h2>
<p>{this.state.testName}</p>
<p>{this.state.topics}</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
);
}
}
export default App;
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:
Approach 4: Updating the state using its previous value
We create an initial state count having a value of 0. The function updateState() increments the present value of the state by 1 whenever it is called. This time we use setState() method in an arrow function by passing prevState as a parameter. The current value of the state is accessed with prevState.stateName which gets incremented by 1 whenever we press the button. This method is really useful when we are setting a value in the state in such a way that it depends on its previous value. For example, toggling a boolean (true/false) or incrementing/decrementing a number.
// Filename - App.js
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
// Set initial state
this.state = {
count: 0,
};
// Binding this keyword
this.updateState = this.updateState.bind(this);
}
updateState() {
// Changing state
this.setState((prevState) => {
return { count: prevState.count + 1 };
});
}
render() {
return (
<div>
<h2>Click Counter</h2>
<p>
You have clicked me {this.state.count}{" "}
times.
</p>
{/* Set click handler */}
<button onClick={this.updateState}>
Click me!
</button>
</div>
);
}
}
export default App;
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:
Summary
React setState provides a way to manage the state in React class components asynchronously and update the UI based on user interactions and other changes.
