# ✅ Checkpoint: component, JSX, props và state

By Better Wise



## Quiz

1. Trong JSX, cách viết nào đúng để gắn handler cho sự kiện click?
   - <button onClick="handleClick">Bấm</button>
   - <button onclick="handleClick()">Bấm</button>
   - <button onClick={handleClick}>Bấm</button>
   - <button onClick={handleClick()}>Bấm</button>
2. Vì sao đoạn code sau không cộng đúng 2 lần?

setCount(count + 1);
setCount(count + 1);
   - Vì phải dùng count++ thay cho count + 1
   - Vì setCount chỉ được gọi một lần mỗi handler
   - Vì React gom các lần cập nhật, cả hai dòng đều đọc cùng một giá trị count cũ trong lần render đó
   - Vì count là props nên không thể thay đổi
3. Cách cập nhật đúng khi state là object user = { name: "Bình", age: 20 } và bạn muốn đổi name thành "An"?
   - user = { ...user, name: "An" };
   - setUser({ ...user, name: "An" });
   - setUser(user.name = "An");
   - user.name = "An";
4. Khi render danh sách bằng map(), React dùng key để làm gì?
   - Để nhận diện phần tử nào giữ nguyên, phần tử nào mới hoặc bị xóa khi render lại
   - Để hiển thị key ra màn hình cạnh mỗi phần tử
   - Để sắp xếp danh sách theo thứ tự alphabet
   - Để truyền dữ liệu vào component con qua props
5. Vì sao không nên dùng index làm key khi danh sách có thể chèn, xóa hoặc sắp xếp lại?
   - Vì index không duy nhất trong danh sách
   - Vì index làm chậm tốc độ tải trang
   - Vì index luôn là số nên React không chấp nhận
   - Vì index đổi theo vị trí nên React có thể gán nhầm state hoặc DOM của phần tử cũ cho phần tử mới
6. Để render mảng fruits thành danh sách trong JSX, ta gọi phương thức ____ trên mảng và trả về JSX cho mỗi phần tử.
7. Với dữ liệu lấy từ API, nguồn key tốt nhất cho mỗi phần tử là ____ của bản ghi.
8. Hãy tự đánh giá: bạn có thể viết một component nhỏ (ví dụ danh sách công việc) dùng useState, xử lý sự kiện click/change và render danh sách có key ổn định không? Tự chấm theo các tiêu chí sau.


---

## Contents

Part of [⚛️ React từ con số 0 cho người chỉ biết HTML](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html.md)

- **🧱 Nền tảng JavaScript và tư duy React**
  - [✨ ES6 thiết yếu cho React: let, const, arrow function, destructuring, spread](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/es6-thiet-yeu-cho-react.md)
  - [🔁 Hàm và mảng trong thực tế: map, filter, reduce](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/ham-mang-map-filter-reduce.md) (sign-in required)
  - [🧩 Tư duy component và khởi tạo dự án với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/tu-duy-component-va-khoi-tao-vite.md)
  - [✅ Checkpoint: nền tảng JavaScript và tư duy React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-nen-tang-javascript-va-react.md)
- **🧩 Component, JSX, props và state**
  - [📄 JSX và component đầu tiên](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/jsx-va-component-dau-tien.md)
  - [📦 Props và composition: truyền dữ liệu giữa component](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/props-va-composition.md)
  - [🔄 State với useState và xử lý sự kiện](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/state-usestate-va-su-kien.md)
  - [📋 Render danh sách và key trong React](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/render-danh-sach-va-key.md)
  - [✅ Checkpoint: component, JSX, props và state](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-component-va-state.md) — this lesson
- **🚀 Form, useEffect, gọi API và dự án nhỏ**
  - [📝 Form và controlled components](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/form-va-controlled-components.md)
  - [⚙️ useEffect và side effects](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/useeffect-va-side-effects.md)
  - [🌐 Gọi API với fetch: loading, error và cleanup](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/goi-api-voi-fetch.md) (premium content)
  - [🛠️ Dự án: ứng dụng quản lý nhỏ với Vite](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/du-an-ung-dung-quan-ly-voi-vite.md) (premium content)
  - [✅ Checkpoint: form, useEffect, gọi API và dự án](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/checkpoint-form-api-va-du-an.md) (premium content)
- [Course cheatsheet](https://everwise.study/courses/react-tu-con-so-0-cho-nguoi-chi-biet-html/cheatsheet.md) (premium content)