In this session, we will learn about React JS state with example and code.
What is JS State
React JS State is the place where the data comes from. It should be always minimize the number of stateful components and try to make as simple as possible. For example if we have some data like ten components that need data from the state, then we should create one container component that will keep the state for all of them.
Using State code
The mention below following code will show how to create stateful component in React JS state with the help of using EcmaScript2016 syntax.
App.jsx
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
The above mention code will display the following code result as shown below:
Creating the state Object
The state object is the first thing in the constructor method:
//Example:
//In the constructor method must specify the state object:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
It contain as many properties as you like in the state object:
//Example:
//All the properties specify component you 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
You can also refer the state object anywhere in the component with the help of this.state.property name syntax:
//Example:
//You can refer to the state object with the help of 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
Use the this.setState()
The component will re-render, meaning that the output will always change according to the new values when a value in the state object changes.
//Example:
//To change the color property add a button with an onclik event:
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>
);
}
}
