Using State in React Components
May 16, 2020
In class components, you can have an internal state to access data only important to this component.
I created a state object that has a list
and checkingOut
property for a ShoppingCart
class.
state = {
list: ['bread', 'apples', 'tea'],
checkingOut: false
}
State data is accessed in the component using this.state.<data>
.
render() {
return (
<div>
List:
<ul>
{
this.state.list.map(item => {
return <li key={item}>{item}</li>;
})
}
</ul>
<p>Checking out? {this.state.checkingOut ? 'Yes' : 'No'}</p>
<button onClick={this.onCheckout}>Check out</button>
</div >
)
}
State data can also be modified using this.setState()
.
In the example below, checkingOut
is set to true
when the button is clicked.
this.setState()
does not overwrite the other data (like list
) even though it's not included in the update to the state object.
state = {
list: ['bread', 'apples', 'tea'],
checkingOut: false
}
onCheckout = () => {
this.setState({checkingOut: true});
}
render() {
return (
<div>
List:
<ul>
{
this.state.list.map(item => {
return <li key={item}>{item}</li>;
})
}
</ul>
<p>Checking out? {this.state.checkingOut ? 'Yes' : 'No'}</p>
<button onClick={this.onCheckout}>Check out</button>
</div >
)
}
If you need to know the data's current state in order to modify it, an argument that represents the current state can be passed (which is called prevState
in the code below).
So checkingOut
will be set to the opposite boolean value of its current value.
this.setState((prevState) => {
return {
checkingOut: !prevState.checkingOut
}
});
Example with everything discussed:
import React, { Component } from 'react';
class ShoppingCart extends Component {
state = {
list: ['bread', 'apples', 'tea'],
checkingOut: false
}
onCheckout = () => {
this.setState((prevState) => {
return {
checkingOut: !prevState.checkingOut
}
});
}
render() {
return (
<div>
List:
<ul>
{
this.state.list.map(item => {
return <li key={item}>{item}</li>;
})
}
</ul>
<p>Checking out? {this.state.checkingOut ? 'Yes' : 'No'}</p>
<button onClick={this.onCheckout}>Check out</button>
</div >
)
}
};
export default ShoppingCart;
Coming from a Vue.js background, I found a component's internal state to be similar to the data()
returned in a Vue component where it is managed and modified directly from the component.