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.
Javascript
// Filename - App.jsimport 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:
ReactJS setState()
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. Whenever the state changes, React re-renders the component to the browser. Before updating the value of the state, we need to build an initial state setup. Once we are done with it, 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
- Steps to Create React Application:
- Updating multiple attributes
- Updating state values using props.
- Updating the state using its previous value.