What is React State? | React state in details | React Tutorial

What is React State? | React state in details

The state is an updatable structure. It is used to contain data or information about the component. The state in a component can change over time. It can happen as a response to user action or system events. And a component with the state is known as stateful components. It is the heart of the react component. A state must be kept as simple as possible and It can be set by using the setState() method and calling the setState() method triggers UI updates. A state represents the component's information or local state. It can only be modified or accessed inside the component or by the component directly. we need to use the getInitialState() method, to set an initial state before any interaction occurs. For example, if we have five components that need information or data from the state. And we need to create one container component that will keep the state for all of them.

Definition of State:
We have to first declare a default set of values for defining the component's initial state. To do this, first, add a class constructor that assigns an initial state using this.state. And The 'this.state' property can be rendered inside render() method.

Example

The below-given sample code shows how we can create a stateful component using ES6 syntax.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();        
      this.state = { displayBio: true };  
      }  
      render() {  
          const bio = this.state.displayBio ? (  
              <div>  
                  <p><h3>Tutorials link is one of the best resources for CS tutorials</h3></p>   
            </div>  
              ) : null;  
              return (  
                  <div>  
                      <h1>Hello React!! </h1>  
                      { bio }   
                  </div>  
              );  
     }  
}  
export default App;  

It is required to call the super() method in the constructor, to set the state. Because this.state is uninitialized before the super() method has been called.

Output:

Hello React!!
Tutorials link is one of the best resources for CS tutorials

Changing the State
We can change the component state by using the setState() method than passing a new state object as the argument. After that, create a new method toggleDisplayBio() in the above example and bind this keyword to the toggleDisplayBio() method otherwise we can't access this inside toggleDisplayBio() method.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();        
      this.state = { displayBio: false };  
      console.log('Component this', this);  
      this.toggleDisplayBio = this.toggleDisplayBio.bind(this);  
      }  
      toggleDisplayBio(){  
          this.setState({displayBio: !this.state.displayBio});  
          }  
      render() {  
          return (  
              <div>  
                  <h1>Hello React!!</h1>  
                  {  
                      this.state.displayBio ? (   
                          <div>  
                              <p><h4>Tutorials link is one of the best resource for CS tutorials</h4></p>  
                              <button onClick={this.toggleDisplayBio}> Show Less </button>  
                        </div>  
                          ) : (  
                              <div>  
                                  <button onClick={this.toggleDisplayBio}> Read More </button>  
                              </div>  
                          )  
                  }  
             </div>  
        )  
    }  
}  
export default App;  

Output:

Hello React!!!
Read More

When we click the Read More button, we will get the below output, and when we click the Show Less button, we will get the output as shown in the above image.

Hello React!!
Tutorials link is one of the best resources for CS tutorials