Khái niệm

State (viết tắt của “Trạng thái”) cho phép quản lý và cập nhật dữ liệu có thể thay đổi trong một component.

Sử dụng State trong Class Component

Để sử dụng State trong một Class Component, chúng ta cần khai báo và khởi tạo state trong phương thức constructor.

Ví dụ

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;

Trong ví dụ trên

• Chúng ta có một component Counter có một state là count, được khởi tạo giá trị ban đầu là 0 trong phương thức constructor.
• Trong phương thức render, chúng ta hiển thị giá trị của count thông qua biểu thức {this.state.count}.
• Khi nút “Tăng” được nhấn, chúng ta gọi phương thức Up để thực hiện chạy  setState() để cập nhật giá trị của count và giao diện sẽ tự động được cập nhật.