1. Giới thiệu

Bài viết này sẽ hướng dẫn bạn cách hiển thị một mảng trong React và các phương pháp hay nhất để sử dụng khi hiển thị các phần tử khác nhau trong các components.

Một trong những lợi thế của việc sử dụng ngôn ngữ web hiện đại như JavaScript là bạn có thể nhanh chóng tự động hóa việc tạo ra các đoạn HTML. Sử dụng một cái gì đó như một vòng lặp đối với một mảng hoặc một đối tượng có nghĩa là bạn chỉ phải viết HTML cho mỗi item một lần. Tốt hơn, mọi chỉnh sửa trong tương lai chỉ cần áp dụng một lần.

2. Rendering Multiple Elements

Để hiển thị nhiều phần tử JSX trong React, bạn có thể lặp qua một mảng với phương thức .map() và trả về một phần tử duy nhất.

Dưới đây, bạn lặp qua mảng reptiles và trả về một phần tử li cho mỗi item trong mảng. Bạn có thể sử dụng phương pháp này khi bạn muốn hiển thị một phần tử duy nhất cho mỗi item trong mảng:

function ReptileListItems() {
  const reptiles = ["alligator", "snake", "lizard"];

  return reptiles.map((reptile) => <li>{reptile}</li>);
}

// Output:
- alligator
- snake
- lizard

Trong ví dụ tiếp theo, bạn sẽ xem xét lý do tại sao bạn muốn thêm một khóa duy nhất vào danh sách các phần tử được hiển thị bởi một mảng.

3. Rendering a Collection of Elements Inside a Component

Trong ví dụ này, bạn lặp qua một mảng và tạo ra một loạt các thành phần danh sách như ví dụ trước. Để bắt đầu, hãy cập nhật code để sử dụng thành phần <ol> để chứa các mục <li>. Thành phần <ol> sẽ tạo một danh sách có thứ tự các mục:

function ReptileList() {
  const reptiles = ["alligator", "snake", "lizard"];

  return (
    <ol>
      {reptiles.map((reptile) => (
        <li>{reptile}</li>
      ))}
    </ol>
  );
}

Tuy nhiên, nếu bạn nhìn vào console, bạn sẽ thấy warning rằng mỗi phần tử con trong một mảng hoặc vòng lặp phải có một key duy nhất. Warning xuất hiện vì khi bạn cố gắng hiển thị một collection bên trong một component, bạn phải thêm một key. Trong React, một key duy nhất được sử dụng để xác định thành phần nào trong collection cần được hiển thị lại. Việc thêm một key duy nhất giúp React không phải hiển thị lại toàn bộ component mỗi khi có bản cập nhật.

Trong bước này, bạn sẽ render nhiều phần tử trong một component và thêm một key duy nhất. Cập nhật code để bao gồm một key trên các mục danh sách :

function ReptileList() {
  const reptiles = ['alligator', 'snake', 'lizard'];

  return (
    <ol>
      {reptiles.map(reptile => (
        <li key={reptile}>{reptile}</li>
      ))}
    </ol>
  );
}

Giờ bạn đã thêm key, warning sẽ không còn trong console nữa. Trong ví dụ tiếp theo, bạn sẽ thấy cách hiển thị các phần tử liền kề mà không gặp phải lỗi cú pháp phổ biến.

4. Rendering Adjacent Elements

Trong JSX, để hiển thị nhiều hơn một phần tử trong một component, bạn phải thêm một cái bao bọc xung quanh chúng. Trong ví dụ này, trước tiên bạn sẽ trả về một danh sách các item mà không cần lặp qua một mảng:

function ReptileListItems() {
  return (
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  );
}

Điều này sẽ gây ra một hard error trong console: Để khắc phục lỗi này, bạn cần bọc khối các phần tử li trong một thẻ bao bọc. Đối với một danh sách, bạn có thể bọc chúng trong một phần tử ol hoặc ul:

function ReptileListItems() {
  return (
  <ol>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
  </ol>
  );
}

Các phần tử <li> liền kề hiện được bao bọc trong một thẻ bao quanh là <ol> và bạn sẽ không còn thấy lỗi nữa. Trong phần tiếp theo, bạn sẽ hiển thị một danh sách trong một thẻ bao bọc bằng cách sử dụng component fragment

5. Rendering Adjacent Elements with React.fragment

Trước React v16.2, bạn có thể bọc một khối component trong phần tử <div>. Điều này sẽ dẫn đến một ứng dụng chứa đầy div, thường được gọi là "div soup". Để khắc phục sự cố này, React đã phát hành một thành phần mới được gọi là fragment : Khi bạn cần hiển thị danh sách bên trong thẻ bao nhưng muốn tránh phải sử dụng div, bạn có thể sử dụng React.Fragment để thay thế:

function ReptileListItems() {
  return (
  <React.Fragment>
     <li>alligator</li>
     <li>snake</li>
     <li>lizard</li>
  </React.Fragment>
  );
}

Đoạn code được render sẽ chỉ bao gồm các phần tử li và component React.Fragment sẽ không xuất hiện trong code. Ngoài ra, lưu ý với React.fragment không cần thêm key. Bạn có thể nhận thấy việc viết React.fragment tẻ nhạt hơn việc thêm một <div>. May mắn thay, nhóm React đã phát triển một cú pháp ngắn hơn để đại diện cho thành phần này. Bạn có thể sử dụng <> </> thay cho <React.Fragment> </ React.Fragment>:

function ReptileListItems() {
  return (
 <>
    <li>alligator</li>
    <li>snake</li>
    <li>lizard</li>
 </>
  );
}

Kết luận

Trong bài viết này, bạn đã khám phá các ví dụ khác nhau về cách hiển thị mảng trong ứng dụng React. Khi hiển thị một phần tử bên trong một component khác, bạn nên sử dụng một key duy nhất và bọc các phần tử của mình bên trong một phần tử bao bọc nào đó. Tùy thuộc vào trường hợp sử dụng của bạn, bạn có thể tạo danh sách đơn giản được bao bọc trong một component fragment không cần key.

Nguồn : https://www.digitalocean.com/community/conceptual_articles/understanding-how-to-render-arrays-in-react