React state management tutorial for the beginners

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.