Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS State Management API.
As we learned in our previous tutorial, React component maintains and exposes its state through this.state of the component. React gives only one API to maintain states in the component. The API is this.setState(). This API accepts either a JavaScript object or a function that returns a JavaScript object.
The syntax of the setState API is as follows -
As we learned in our previous tutorial, React component maintains and exposes its state through this.state of the component. React gives only one API to maintain states in the component. The API is this.setState(). This API accepts either a JavaScript object or a function that returns a JavaScript object.
The syntax of the setState API is as follows -
this.setState( { ... object ...} );
A simple example to set/update name is as follows -
this.setState( { name: 'Kennedy' } )
The syntax of the setState API with function is as follows -
this.setState( (state, props) => ... function returning JavaScript object ... );
Here,
- state refers to the current state of the React component.
- props refers to the current properties of the React component.
React recommends you to use setState API with function as it works correctly in async environment. Rather than lambda function, normal JavaScript function can be used as well.
this.setState( function(state, props) {
return ... JavaScript object ...
}
A simple example to update the amount via function is as follows -
this.setState( (state, props) => ({
amount: this.state.amount + this.props.additionaAmount
})
React shouldn't be modified directly through this.state member variable and updating the state through member variable does not re-render the component.
A special feature of React state API is that it will become merged with the current state instead of replacing the state. For instance, we can update any one of the state fields at a time instead of updating the whole object. This React feature gives the developers the flexibility to easily handle the state data.
For example, let's consider that the internal state contains a student record.
A special feature of React state API is that it will become merged with the current state instead of replacing the state. For instance, we can update any one of the state fields at a time instead of updating the whole object. This React feature gives the developers the flexibility to easily handle the state data.
For example, let's consider that the internal state contains a student record.
{
name: 'Kennedy', age: 28
}
We can update only the age by making use of the setState API, which will automatically merge the new object with existing student record object.
this.setState( (state, props) => ({
age: 29
});
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be studying about ReactJS Stateless Component.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.