Ôn tập: Điều kiện và danh sách
Thuộc phần Kiến thức cơ bản trong hành trình React của Coddy. Bài học 38 trên 42.
Thử thách
Trung bìnhTóm tắt chương: xây dựng bảng công việc từ dữ liệu, sử dụng mọi kiến thức trong chương này.
- Component định nghĩa một mảng
tasks. Bên trong<ul id="done-list">, hiển thị một<li>cho mỗi công việc đã hoàn thành: dùngfiltertrước, sau đó dùngmap. - Mỗi
<li>hiển thịtextcủa công việc và dùngidcủa công việc làmkey. - Phía trên danh sách, dùng
&&để hiển thị một<span>cóid="badge"với nội dung2 done(lấy số lượng từlengthcủa mảng đã lọc!), nhưng chỉ khi có ít nhất một công việc đã hoàn thành.
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>Tất cả bài học trong Kiến thức cơ bản
1Làm quen với React
React là gì?Component đầu tiên của bạnQuy tắc một phần tử chaJSX không phải HTMLÔn tập: Làm quen với React7Điều kiện và danh sách
Hiển thị bằng toán tử ba ngôiHiển thị với &&Hiển thị danh sáchKhóa rất quan trọngLọc rồi ánh xạÔn tập: Điều kiện và danh sách