16. List trong React JS

Trong React JS, bạn có thể sử dụng danh sách để hiển thị một loạt các phần tử. Một cách thông thường để thực hiện điều này là sử dụng phương thức map() để tạo các phần tử trong danh sách.

Dưới đây là cách sử dụng danh sách trong React bằng cách sử dụng phương thức map():

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, items là một mảng chứa các phần tử bạn muốn hiển thị trong danh sách. Chúng ta sử dụng phương thức map() để lặp qua mảng và tạo các phần tử <li> cho mỗi phần tử trong danh sách. 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.

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”.

Điều quan trọng là đảm bảo mỗi phần tử trong danh sách có một giá trị key duy nhất. Điều này giúp React hiểu rõ hơn về việc cập nhật giao diện khi danh sách thay đổi. Trên đây là giới thiệu về List trong React JS.