We can update an object in React using the setState() method. Every component in React inherits the setState() method from its Base component name Component. setState() method tells React that we are updating the state, then it will figure out what part of the state is changed, and based on that, it will bring the DOM in sync with the virtual DOM.
We pass an object in the setState() method as an argument. The properties of that object will merge with what we have in the state object or override those properties if they already exist.
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
App.js
Javascript
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.
Output of above code
