How To Use State in React

In this part we will see how to use state in react, React State is a structure which contains data and information about the component. The state of an element can change as time passes. The state change with an action by a user or an event in the system. A component that has a state is called a stateful component. It is at the heart of react components, and it determines how the component will render, and behaviour of the component. They also are responsible for making components active and dynamic.

The state should be as easy as possible. It can be changed by setting it using the setState() method. setState() method. Calling the setState() procedure causes UI updates. A state is the local state of the component or information. It is only accessible or modified within the component or directly by the component. To set the initial state before any interaction happens, we must use this method getInitialState() method.

Adding State in React

To add state in react, we need to create a constructor and in this we will call super() constructor as well as if we want to use state for that we need to access it with this.setState.

Example

import React, { Component } from 'react';

class App extends React.Component
{
   constructor(){
      super();
      this.state={ name: "ReactJS Guru"}
   }
   render(){
      return(
         <h2> {this.state.name} is the best website </h2>
      
   );
}
}
export default App;

Here we have used class component because in function component it’s not possible to get constructor, in the constructor we will use super(), so state will be now usable. If you avoid writing super() then you simply can’t use state. After that, we need to add some data as I have added name.

Now to get data from state we need to use it in render() method with this.state.name, remember state is private to constructor so if you want to change out of the constructor then it won’t be possible.

Output

Changing State in React

We can change the state data using this.setState() method, as I mention earlier we cannot change state publicly that means you cannot change state in render() method which is our public element. So state is changeable, not like props.

import React, { Component } from 'react';

class App extends React.Component
{
   constructor(){
      super();
      this.state={ name: "ReactJS Guru"}
   }
   updateMe(){
      this.setState({
         name: "Alex"
      })
      
   }
   render(){
      return(
         <>
         <h2> {this.state.name} is the best website </h2>
         <button onClick= {()=>{this.updateMe()}}> update me</button>
         </>
   );
}
}
export default App;

Okay, we took the same code, so it will be easier to understand. We have here added one button and on this button we added a onClick event if you don’t know what is it? Then let me explain you, with this onClick event if you click on the button then whatever you provided function or something that will come in the action. In this click event, we provided a function named updateMe(), so in this function we have used this.setState to access state, and we have modified the name data in it.

Output

before click:

After Click:

Check out video reference here: