State In React

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

1. Initialising the state object with a key-pair value.

2. Updating the value of state with this.setState

3. 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.