React State
React components has a built-in state
object.
The state object is where you
store property values that belongs to the component.
When the state object changes,
the component re-renders.
Creating the state Object
The state object is initialized in the constructor:
Example:
Specifiy the state object in the constructor method:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
The state object can contain as many properties as you like:
Example:
Specify all the properties your component need:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
Using the state Object
Refer to the state object anywhere in the component by using the
this.state.propertyname syntax:
Example:
Refer to the state object in the
render() method:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}
Changing the state Object
To change a value in the state object, use the this.setState() method.
When a value in the state object changes,
the component will re-render, meaning that the output will change according to
the new value(s).
Example:
Add a button with an onClick event that
will change the color property:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}
Always use the setState() method to change the state object,
it will ensure that the component knows its been updated and calls the render() method
(and all the other lifecycle methods).
