React Lists

Trong React, chúng ta sẽ render danh sách bằng một số loại vòng lặp.

Phương thức mảng của JavaScript map() thường là phương thức được ưa thích.

Lưu ý: Nếu như bạn cần ôn lại phương thức map(), thì hãy xem phần ES6.

Chúng ta hãy render tất cả các cars từ Garage của chúng ta:

Khi chúng ta chạy đoạn code này trong create-react-app, nó sẽ làm việc nhưng chúng ta sẽ nhận được một cảnh báo rằng không có "key" được cung cấp cho các list item.

Key là cái gì ?

Key cho phép React theo dõi các phần tử. Bằng cách này, nếu như một item được cập nhật hoặc bị xóa, thì chỉ item đó sẽ được render lại thay vì toàn bộ danh sách.

Key cần phải là duy nhất đối với mỗi phần tử anh em ruột. Nhưng chúng có thể trùng nhau trên phạm vi toàn cầu.

Thông thường, key sẽ là một ID duy nhất được gán cho mỗi item. Chúng ta có thể sử dụng chỉ số của mảng như là một key.

Chúng ta hãy sửa lại ví dụ trước để bao gồm các key: