15. Vòng Lặp Trong React JS

Trong React JS, không nên sử dụng vòng lặp trực tiếp như for hoặc while để tạo các phần tử trong JSX. Thay vào đó, bạn nên sử dụng các phương pháp khác để thực hiện tạo các phần tử dựa trên dữ liệu như mảng. Một trong những cách phổ biến nhất là sử dụng phương thức map().

Dưới đây là cách sử dụng phương thức map() để tạo danh sách các phần tử trong JSX:

jsx

import React from 'react';

function ListExample(props) {
  const items = props.items;

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default ListExample;

Trong ví dụ này:

Chúng ta sử dụng phương thức map() để lặp qua mảng items và tạo các phần tử <li> cho mỗi phần tử trong mảng.
Mỗi phần tử có một thuộc tính key để xác định duy nhất. Trong trường hợp này, chúng ta sử dụng chỉ số index của mảng làm giá trị của key. Lưu ý rằng sử dụng chỉ số là không khuyến nghị khi có thể, bạn nên sử dụng một giá trị duy nhất và ổn định hơn từ dữ liệu của bạn.

Ví dụ sử dụng trong ứng dụng:

jsx

import React from 'react';
import ListExample from './ListExample';

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <h1>List Example</h1>
      <ListExample items={items} />
    </div>
  );
}

export default App;

Trong ví dụ này, ListExample sẽ tạo ra một danh sách có các phần tử “Item 1”, “Item 2”, “Item 3”.

Lưu ý rằng React khuyến nghị sử dụng một giá trị duy nhất và ổn định như một id từ dữ liệu để làm giá trị key, thay vì chỉ số. Điều này giúp tối ưu hóa hiệu suất khi cập nhật giao diện. Trên đây là giới thiệu về Vòng lặp trong React JS.

Leave a Comment Cancel Reply