What is State in React JS

In this article, we will learn about what is a component state in React JS. Every react component returns JSX, which describes the user Interface. It is the second way to influence rendered on the screen, so the first way is props.

Props vs State

Props:

• It passed to the component.
• An analogy for this would be function parameters.
• Props are immutable, the parent owns the props and cannot be changed by the children.
• In the functional components, props can be accessed using the props parameter. In class component props can be accessed using “this.props“.

State:

• It is managed within the component.
• Variables are declared within the function body because the parent usually passes down the props to the child component.
• It is managed within the component and hence the component has fully controlled to change the state.
• It can be accessed using the useState hook in functional components and “this.state” in the class component.

That is a comparison between props and states in React components. Ultimately both props and state hold information that influences the UI in the browser. Let’s take a look at the example of how the state can be used in the class components.

Example:

class Message extends Component{
 render(){
 return(
  <h1>
   Welcome Everyone
  </h1>
  )
 } }

Output

1. In the above code, we have created a class component and named it Message. In JSX we have simply returned the text “welcome Everyone”.
2. So, our output is displayed successfully.

Now here we need to have a subscribe button right below the text and when we click on the button the text being displayed should change from “welcome Everyone” to “Thankyou For Subcribing“. Now if the message were to be sent from app.js as a property as props are immutable, once the message is said to “Welcome Everyone” it can never be changed from the message component. And the solution is, to use a component state. Let’s see how to create a state step by step.

Steps to create State

Step 1: To create a state object and initialize it inside the class constructor.

constructor(){
 super()
  this.state ={
   message : "welcome visitor"
  }
 }

Here, we have created a constructor and inside it we called the “super” method. This is required because we extend react component class and a call has to be made to the base class constructor. Then we created our state object using “this.state”. And assigned to called the ‘message’ and the value is set to be “welcome Visitor”. Remember we are inside a class, so don’t forget to use the “this” keyword. So, we created state object.

Step 2: To bind state value in the render function
We do this very similarly to props, instead of “this.props” we simply use “this.state“. So, in the return statement, We call “this.state.message”

render()
 return(
  <h1>
    {this.state.message}
  </h1>
 )
}

Step 3: Create button Element:

render(){
 return(
  <div>
   <h1> {this.state.message} </h1>
   <button > Subscribe</button>
  </div>
  )
}

To add a button inside the return, we need to use the <button> tag like the above code. Then we added the “onClick” attribute and pass the arrow function handler called “this.changeMessage”. Now let’s define the “changeMessage()” function.

Step 4: Define “changeMessage()” the Method using setState:

changeMessage(){
 this.setState({
  message:"Thankyou For subscribing"
 })
}

We have created the “changeMessage()” function and within the body to change the state of the component we need to call the “setState()” method. So, we put “this.setState()”. The “this” method accepts an object which is nothing but the new state of the component. In the new state all we ned is the message to be “Thankyou For subscribing”.

See the output below, after clicked the button our text is changed successfully.

I hope you have a slightly better understanding of state.