Bài 3. Props & State – Giao tiếp và quản lý dữ liệu trong React

Sau khi bạn đã hiểu JSX là gì và biết cách tạo các Component trong React, thì bài học hôm nay chính là “chìa khóa vàng” để giúp các component đó giao tiếp với nhau và lưu trữ dữ liệu.

---

Giao diện đẹp rồi, giờ cho nó thông minh nữa!

Bạn đã tạo được các component và hiển thị giao diện rồi – tuyệt! Nhưng nếu tất cả chỉ là “viết cố định”, thì không khác gì HTML thuần.
Vấn đề là:

• Làm sao để truyền dữ liệu động từ cha sang con?
• Làm sao component biết khi nào nên thay đổi giao diện?
• Làm sao để quản lý trạng thái, ví dụ: nút bấm để đổi tên, hoặc form nhập liệu?

Tất cả câu trả lời đều nằm ở Props và State – hai yếu tố không thể thiếu trong React.

---

1. Props là gì?

Props là viết tắt của “properties”, dùng để truyền dữ liệu từ component cha sang component con.

Ví dụ:

📋 Copyfunction Welcome(props) {
  return <h2>Xin chào, {props.name}!</h2>;
}

📋 Copyfunction App() {
  return (
    <div>
      <Welcome name="Minh" />
      <Welcome name="Trang" />
    </div>
  );
}

Kết quả:

📋 CopyXin chào, Minh!
Xin chào, Trang!

props.name chính là cách component Welcome lấy dữ liệu truyền vào từ App.

---

2. Cách destructuring props (viết gọn)

📋 Copyfunction Welcome({ name }) {
  return <h2>Chào bạn, {name}</h2>;
}

Thường dùng cách này cho ngắn gọn và dễ đọc.

---

3. State là gì?

State là trạng thái nội bộ của component. Nếu bạn muốn component:

• thay đổi khi người dùng tương tác (click, nhập liệu…)
• cập nhật nội dung mà không cần load lại trang

Thì bạn cần state.

---

4. Dùng useState để tạo state

📋 Copyimport { useState } from 'react';

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

  return (
    <div>
      <p>Bạn đã bấm {count} lần</p>
      <button onClick={() => setCount(count + 1)}>Bấm tôi!</button>
    </div>
  );
}

Giải thích:

• useState(0) → tạo biến count có giá trị ban đầu là 0
• setCount() → hàm để cập nhật lại state
• Khi gọi setCount(), React render lại component

---

5. Props vs State: khác nhau chỗ nào?

Props	State
Truyền từ cha → con	Là dữ liệu riêng của component
Không thể thay đổi từ bên trong	Có thể cập nhật qua setState / setX()
Dùng để giao tiếp	Dùng để theo dõi và thay đổi trạng thái
Read-only	Có thể thay đổi

---

6. Ví dụ thực tế: Thẻ người dùng

Tạo component UserCard.js

📋 Copyfunction UserCard({ name, age }) {
  return (
    <div style={{ border: '1px solid #ccc', margin: '10px', padding: '10px' }}>
      <h3>{name}</h3>
      <p>Tuổi: {age}</p>
    </div>
  );
}

export default UserCard;

App.js

📋 Copyimport UserCard from './UserCard';

function App() {
  return (
    <div>
      <UserCard name="Tuấn" age={25} />
      <UserCard name="Linh" age={22} />
    </div>
  );
}

Bạn đã biết cách truyền props vào UserCard!

---

7. Ví dụ thực tế: Component đổi tên bằng state

📋 Copyimport { useState } from 'react';

function NameChanger() {
  const [name, setName] = useState('Ẩn danh');

  const doiTen = () => {
    setName('Nguyễn Văn A');
  };

  return (
    <div>
      <h2>Xin chào, {name}!</h2>
      <button onClick={doiTen}>Đổi tên</button>
    </div>
  );
}

export default NameChanger;

---

8. Bài tập thực hành

1. Tạo component Profile nhận props: name, bio
2. Hiển thị thông tin cá nhân: tên, mô tả
3. Thêm component LikeButton có state likes, mỗi lần bấm tăng lên 1
4. Tích hợp vào App.js:

📋 Copy<Profile name="Minh" bio="Yêu code và đi chơi biển" />
<LikeButton />

Bonus:

• Tạo 1 mảng danh sách người dùng
• Dùng .map() để render nhiều Profile từ mảng đó

---

9. Tổng kết – Props và State là hai trụ cột

Bạn thấy đấy, khi biết props, bạn có thể truyền dữ liệu linh hoạt giữa các component.
Với state, bạn có thể cập nhật giao diện khi dữ liệu thay đổi – và đó chính là điều khiến React trở nên sống động và mượt mà.

---

Tiếp theo là gì?

Trong bài sau, bạn sẽ học cách:

• xử lý sự kiện như click, nhập liệu
• quản lý input với useState
• làm các hành vi quen thuộc như checkbox, form, xử lý dữ liệu nhập vào

Hẹn gặp bạn ở Bài 4: Sự kiện và xử lý dữ liệu trong React