Hiển thị 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 35 trên 42.

Dữ liệu thường nằm trong mảng (array), còn map biến một mảng thành danh sách (list) các phần tử (element):

const fruits = ['Apple', 'Banana', 'Cherry'];

<ul>
    {fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>

map gọi hàm mũi tên của bạn một lần cho mỗi phần tử và thu thập các phần tử <li> được trả về. React hiển thị toàn bộ mảng. Thêm một loại trái cây vào dữ liệu, danh sách sẽ tự tăng; mã đánh dấu không bao giờ thay đổi.

Thuộc tính key={fruit} giúp mỗi mục có một định danh ổn định. Bài học tiếp theo sẽ nói thêm về thuộc tính này; hiện tại, hãy luôn thêm một key duy nhất vào phần tử bạn trả về từ map.

Thử thách

Dễ

Hiển thị menu từ dữ liệu.

Bên trong <ul id="fruit-list">, dùng map để hiển thị một <li> cho mỗi loại trái cây trong mảng.
Mỗi <li> hiển thị tên loại trái cây và dùng tên đó làm key.

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>