State: app biết nhớ

Học useState – bộ nhớ của component. App bắt đầu phản ứng click theo cách React.

Vì sao biến thường không đủ

Ở Cấp 2, bạn làm bộ đếm bằng cách tự viết lại chữ nút sau mỗi click. React khác: đổi dữ liệu, React vẽ lại màn hình. Nhưng phải đưa dữ liệu vào hộp đặc biệt gọi state – không thì React không nhận ra thay đổi.

Xem này: bộ đếm trong React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked: {count}×
    </button>
  );
}

export default Counter;

Giải thích dòng quan trọng nhất – const [count, setCount] = useState(0);:

useState(0) – “React, tạo hộp giúp tôi, giá trị ban đầu 0.”
count – giá trị hiện tại trong hộp (chỉ đọc).
setCount – cách duy nhất đúng để đổi giá trị. Gọi setCount(5), React lưu giá trị mới và tự vẽ lại mọi chỗ dùng count.

Và onClick={...} là phiên bản React của addEventListener("click", ...) – ngay trong JSX.

Chú ý không có trong code: không getElementById, không textContent. Bạn không nói cách đổi màn hình – bạn nói điều gì đúng bây giờ (count giờ là 5), màn hình tự sắp xếp.

Xem này: state điều khiển cái hiển thị

State không chỉ là số. Mục thu gọn, kiểu React:

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

Hai trick JSX mới:

condition ? A : B – if/else rút gọn trong HTML: “nếu mở thì cái này, không thì cái kia.”
condition && (...) – “chỉ render nếu điều kiện đúng.” Khi open false, danh sách không tồn tại.

Và !open nghĩa là “ngược lại” – true thành false và ngược lại. Một dòng = công tắc.

Đến lượt bạn 💪

Thêm hai thứ dùng state vào app:

Mục thu gọn (state true/false) theo dự án: 🏫 thực đơn trưa thu gọn · 🙋 “ẩn/hiện game hay nhất” · 🌍 danh sách quốc gia thu gọn · ⚽ danh sách đội thu gọn.
Bộ đếm hoặc bình chọn (state số): 🏫 bình chọn chuyến đi lớp · 🙋 “bao nhiêu người chào hôm nay” · 🌍 bộ đếm quốc gia đã đến · ⚽ bảng điểm với nút +1 nhà / +1 khách (hai state!).

Giải pháp thêm: bảng điểm hai state

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

Component có thể có bao nhiêu hộp tùy ý – mỗi useState là một.

✅

Tự kiểm tra: App có ít nhất hai chỗ tương tác, và không còn getElementById trong code. Nếu nắm được tư duy này (“tôi đổi dữ liệu, không đổi màn hình”), bạn đã vượt phần khó nhất của React.

Điều cần nhớ từ bài học này

const [value, setValue] = useState(start) – bộ nhớ component.
Chỉ đổi qua setValue(...) – React tự vẽ lại.
Trong JSX: onClick={...}, điều kiện ? : và && điều khiển cái hiển thị.