3.1. Tổng quan về State

1. Khái niệm

• State là một đối tượng trong React giúp lưu trữ thông tin động liên quan đến component. Khi state thay đổi, React sẽ tự động cập nhật lại giao diện tương ứng.

• Khác với props (dữ liệu từ component cha truyền xuống), state là dữ liệu nội bộ của component và có thể thay đổi trong suốt vòng đời của component.

1. Ý nghĩa

• Quản lý các thay đổi trên giao diện khi người dùng tương tác (ví dụ: nhập liệu, nhấp chuột,...).

• Điều khiển dữ liệu trong một component và đảm bảo việc hiển thị luôn nhất quán với dữ liệu đó.

1. Ví dụ về state

Giao diện hiển thị một số và tăng số đó lên mỗi khi nhấn vào nút:

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}