How Can We Help?
< All Topics

React State

React State is a fundamental concept that represents the mutable part of a component and is used to store information that can change over time and affect the component’s behavior and rendering.

State is a JavaScript object associated with a component and is used to store data that can be updated and cause the component to re-render when changes occur. State can be accessed using the `this.state` member variable in the component. But it’s not accessible or modifiable from outside the component.

To manage state in a Class Component, you use the `setState()` method, and in Functional Components, you can use the `useState()` hook.

In this chapter we will see how we can manage state in Class Component, and managing state in Functional Component will learn in React Hooks chapter.

State management in Class Component

In Class Component you can access state using the `this.state` and you can update state using the `setState()` method and control how the component re-renders when the state changes.

To initialize the `state` in the Class Component we will use a special method called Constructor.

Constructor in React

The constructor is a special method used to initialize an object’s state and bind event handlers in a class component. When you implement the constructor, you need to call the `super(props)` method before any other statement. Like this:

constructor(props) {
super(props);
}

It is necessary to call `super()` inside a constructor. If you need to set a property (prop) or access `this` inside the constructor, you need to call `super()`.

After calling the `super(props)` method If the component needs to use a local state, you can directly use ‘this.state‘ to assign the initial state in the constructor.

Okay, then. Let’s understand state management in a class component with a simple example.

Example of state management in a Class Component

So, here we will create a Counter.

First create a Class Component named Counter (Counter.js), inside the src/components folder.

import React, { Component } from 'react';

class Counter extends Component { 
render() {
return (
<div>Counter</div>
);
}
}

export default Counter;

Then in the constructor method initialize the state using the `this.state` property.

import React, { Component } from 'react'; class Counter extends Component {
constructor(props) {
super(props); this.state = {
count: 0,
};
}
render() { return (
<div></div>
);
}
}

export default Counter;

Here it initializes the component’s state object with an initial count value 0.

Then define an arrow function named increment to update the `count` state.

When the increment function executes, the setState method will update the `count` state by incrementing the current value by 1. Like this:

import React, { Component } from 'react';

class Counter extends Component { constructor(props) {
super(props); this.state = {
count: 0,
};
}

increment = () => {
this.setState({ count: this.state.count + 1 });
};

render() { return (
<div></div>
);
}
}

export default Counter;

Then use the render() method to return JSX elements. Here It renders a <div> containing a paragraph (<p>) element displaying the current `count`, and a <button> element with an
`onClick` event handler that triggers the `increment` function when clicked.

...other code, as given above render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}

export default Counter;
Table of Contents