React state management tutorial for the beginners

by Sai gowtham2min read
React state management tutorial for the beginners

In this tutorial, we will learn about state management in react apps with the help of examples.

What is a state ?

State is a (private) data which is related to the particular component where we can’t access the state from outside the component.

How to intialize a state in react ?

To initialize a state in react we need to declare a new property called state and initialize with the object.

Note: state is a reserved word in react.

class Login extends React.Component {

     // state
     state= { }
   render(){
       return (
           <div>
           <button>Login</button>
           </div>
       )
   }

}

Inside the Login component we initialized a state with the empty object. Our goal is to add the login functionality to the component by storing the login data inside the state object.

class Welcome extends React.Component{

    render(){
        return <h1>Welcome to react world</h1>
    }
}


class Login extends React.Component {

     state= {
         isLogin : false     }

   render(){
       return (
           <div>
            {this.state.isLogin && <Welcome />}           <button>Login</button>
           </div>
       )
   }

}

In the above code, we added isLogin property and <Welcome/> component to the Login component.

We have also added one condition,render <Welcome/> component only if isLogin property value is true.

How to change the state ?

To change the component state we need to use this.setState( ) method provided by the react.we can’t change the state directly like this.state.isLogin = false.

Final step to add the login functionality.

class Welcome extends React.Component{

    render(){
        return <h1>Welcome to react world</h1>
    }
}


class Login extends React.Component {

     state= {
         isLogin : false     }

 handleLogin = ()=>{
     this.setState({
         isLogin : !this.state.isLogin     })
 }

   render(){
       return (
           <div>
            {this.state.isLogin && <Welcome />}
            <button onClick={this.handleLogin}>            {this.state.isLogin ? "Logout":"Login"}            </button>           </div>
       )
   }

}

Play with codepen

this.setState( ) method asynchronously updates the state by accepting the first argument as an object.

What happens when we update a state ?

The parent and all its child components are rendered again with the updated state.

For example : In the above code when we change a state inside the Login component. The component itself and its <Welcome/> child component is also rendered again.