State in React JS day#4

Hello, guys welcome back. In the previous article, we see how to apply a style to components in react. In this, we going to see the state in react. so let’s get started.

State in React JS

A state is simply a JS object. It controls the UI of the web page when the state is changed the react re-render the component and recursively his child component. So store the data in a state that affects the UI of the page.

The thing you need to know about the state

The state is immutable.
To modify the state we must use function setState(new state object) which present in the React.Component.
Initialize the state inside the constructor by this.state={}.

Register component

Let’s understand the state with an example.

Let’s create the Register component which has an input box and register button on it and we add some style to it.

Register.js

import React from 'react';

import "./Register.css";

class Register extends React.Component
{
 //return the input box and register button
 render() 
 {
   return(
        <div className="register_container"> 
                 <input type="text" placeholder="Enter the player name.." className="player_name"/>
                 <input type="button" value="Register" className="reg_button"/>
        </div>
      );
 }
}

Register.css

.register_container
{
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.reg_button
{
  background-color: yellow; 
  border-radius: 10px;
  border:0;
  outline: none;
  margin-left: 15px;
  width: 85px;
  height: 30px;
}
@media (max-width:652px)
{
.reg_button
{
  margin-top: 10px;
}
}

We allow the player to play only if the player register first. So after the player clicks the register button, we need to display the weapons. There is a change in UI when the player clicks. So we need to store the player name in the state object.

Register.js

import React from 'react';
import "./Register.css";

class Register extends React.Component
{
 constructor(props)
 {
   super(props);
   //at initial the player name is empty string
   this.state={player_name:""};
 }

 //return the input box and register button
 render() 
 {
    return(
        <div className="register_container">
           <input type="text" placeholder="Enter the player name.." className="player_name" value=      {this.state.player_name}/>
           <input type="button" value="Register" className="reg_button"/>
       </div>
          );
 }
}

For this tutorial, we simply going to use the setTimeout function to change the player name because we do not cover handling events in react we will cover that in the upcoming days.

We going to call the function changePlayer function after one second using the setTimeout function inside the constructor.

changePlayer function will change the player name and we setting the player name to input value so, at initial, it has empty string but after one second the value of input will be “user1”.

Register.js

import React from 'react'; 
import "./Register.css";

class Register extends React.Component
{
 constructor(props)
 {
  super(props);
  
  //at initial the player name is empty string
  this.state={player_name:""};
  
  //calling changePlayer function after 1sec
  setTimeout(this.changePlayer,1000);
 }

 changePlayer()
 {
  this.setState({player_name:"user1"});
 }

 //return the input box and register button
 render() {

    return(
     <div className="register_container">
       <input type="text" placeholder="Enter the player name.." className="player_name" value={this.state.player_name}/>
       <input type="button" value="Register" className="reg_button"/>
     </div>
          );
 }
}

Did you find anything wrong with the above code?.

If you closely look at changePlayer function. We use this keyword to access the setState function but there only we did a big mistake because we call the function changePlayer inside setTimeout function.

Which has a different context so this keyword will bind to the setTimeout function. So we will get an error “Uncaught TypeError: Cannot read property ‘setState’ of undefined“.

To avoid that bind this with the function changePlayer by like this inside constructor.

Register.js

import React from 'react'; 
import "./Register.css";

class Register extends React.Component
{
 constructor(props)
 {
  super(props);

  //at initial the player name is empty string
  this.state={player_name:""};

  //binding the this to function 
  this.changePlayer=this.changePlayer.bind(this);
  
  //calling changePlayer function after 1sec
  setTimeout(this.changePlayer,1000);
 }
................
}

Next import Register component in App.js.

App.js

import React from 'react';
import './App.css';
import Header from "./components/Header";
import Register from "./components/Register";

class App extends React.Component {
    
    render() 
    {
        return ( 
                 <div> 
                    <Header/>
                    <Register/> 
                  </div> 
                ); 
     } 
}

If you run the program you will see the input box will have the value user1 after one second.

After one second.

setState is Asynchronous

Yes, the setState function runs asynchronously so if your state value is dependent on the previous one. The best practice to update the state is given below.

this.setState((state)=>{
                         return {counter:state.counter+1};
                       }

We use a function that takes a previous state as an argument by using that state we update the current state and also we can pass the callback to the setState function such that the callback is called once the state is updated

this.setState((state)=>({counter:state.counter+1}), ()=>{//callback} }

we will use the methods to update the state and callback in upcoming articles and see why we use that.

Conclusion

Ok guys that’s enough for today. We learn about the state in react. In the next article, we will see props in react.

All the best guys for upcoming days keep learning.

State in React JS day#4

State in React JS

Register component

setState is Asynchronous

Conclusion

Leave a Reply Cancel reply