Concept

State (short for "Trạng thái") allows managing and updating data that can change within a component.

Using State in Class Component

To use State in a Class Component, we need to declare and initialize the state in the constructor method.

Example

import React from 'react';

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

  render() {
    const Up =()=>{
      this.setState({count: this.state.count + 1})
    }
    return (
      <div>
        <h2>Số lượng: {this.state.count}</h2>
        <button onClick={Up}>Tăng</button>
      </div>
    );
  }
}

export default Counter;

In the example above

• We have a Counter component with a state called count, which is initialized with a value of 0 in the constructor method.
• In the render method, we display the value of count through the expression {this.state.count}.
• When the "Increase" button is pressed, we call the Up method to execute setState() to update the value of count and the interface will be automatically updated.