State is a special built-in object in react, which allows components to create and manage their own data. The concept of state is what truly makes React components resuable and interactive. It is important to note here that while props store static data, meaning the data stored cannot be easily changed, state allows you to store dynamic data or data that is subject to change. This is done with the this.setState
property that automatically re-renders to the new value once it’s setState
is updated.
There are three major steps in using the state object
Initialising the state object with a key-pair value.
Updating the value of state with
this.setState
Using the updated value.
INITIALISING THE STATE OBJECT
This is the first step in using state in react and it can be done in two major ways. The first way involves invoking the constructor function and the super()
. Next we initialise the state using this.state
and assign it to an object that takes a key and a value. When initialising a state; it is common to assign the value to an empty string”” if you expect a string , an empty array[] or to the value of “null”
Take a look at the code sample below
Class App extends React.Component {
constructor(props){
super(props)
this.state = {key : “”}
}
render (){
return <div>App </div>;
}
}
ReactDOM.render(<App/>, document.getElementById(“root”);
Here we initialised our state object within the constructor function and assigned it to an object with and key and the value of an empty string.
Another way to initialise the state is without the constructor function and initialising state
just above the render method. This is a shorthand syntax which relies on the power of Babel, one of the dependencies of the React app which transpiles and converts it to the same code as above.
See the code sample below
Class App extends React {
state = {name : “”}
render (){
return <div>App </div>;
}
}
ReactDOM.render(<App/>, document.getElementById(“root”);
UPDATING OUR STATE
The state property which we initialised using this.state is usually updated using the this.setState()syntax which also takes an object with a key-pair value.
Consider the example below
Class App extends React.Component {
constructor(props){
super(props)
this.state = {name : “”}
}
updateState = () => {this.setState({name: “Kehinde ”})}
render (){
return <div>App</div>;
}
}
ReactDOM.render(<App/>, document.getElementById(“root”);
Notice how we have updated the value of our state by using a function updateState with this.setState to “Kehinde “
Now anytime the setState property is updated the component re-renders automatically.
USING THE UPDATED VALUE
The final step involves us using the updated value of the state object by calling it the way we call any other JavaScript object and enclosing it in curly brackets
Class App extends React.Component {
constructor(props){
super(props)
this.state = {name : “”}
}
updateState = () => {this.setState({name: “Kehinde ”})}
}
render (){
return <div>{this.state.name}</div>;
}
}
ReactDOM.render(<App/>, document.getElementById(“root”);
CONCLUSION
In conclusion the state object in react is an indispensable aspect of the library that helps us store dynamic data by automatic component re-rendering and it opens up a world of possibilities when building your single page applications.
Top comments (0)