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 : 'w3wiki 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.
Javascript
// Filename - App.jsimport 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: "w3wiki 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:
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.