How to Update an Object with setState in ReactJS?

setState in React is used to update the component state. Updating an object with setState involves modifying only specified properties of object without modifying the complete object. Directly updating the object can lead to the loss of data and unwanted results.

Prerequisites:

• ReactJS
• setState

Approach

To update an object with setState in React we will use setState with the shallow copy of the state object. We will update specific properties using the spread operator and pass updated object to setState to apply changes and trigger re-render.

Syntax:

// for simple objects
this.setState({ count: this.state.count + 1 });

// for complex/ nested object
this.setState(prevState => ({
    ...prevState,
    nestedObject: {
        ...prevState.nestedObject,
        someProperty: newValue
    }
}));

Steps to Create React App

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.

Example: In this example, setState is used to update the count property by overriding its value with this.state.count + 1 to trigger a re-render.

// Filename - App.js

import React, { Component } from "react";
class App extends Component {
	// Object with one property count
	state = {
		count: 0
	};

	// Method to update the object
	handleIncrement = () => {
		// Updating the object with setState() method
		// by passing the object and it will override
		// the value of count property
		this.setState({ count: this.state.count + 1 });
	};

	render() {
		return (
			<div style={{ display: "block", width: 40, margin: "auto" }}>
				<h1>
					<span>{this.state.count}</span>
				</h1>
				<button onClick={this.handleIncrement}>Increment </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: Click on increment button to increase the value of count.