React.js Array to list

• Dữ liệu dưới dạng Array, Object làm sao có thể chuyển đổi sang cấu trúc là một danh sách (list) của HTML? nội dung bài học này sẽ giúp các bạn làm được việc đó.

Render giá trị Array

• Để lấy giá trị là một Array, đối với Javascript ta làm như sau:

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

Kết quả khi xem console (nhấn F12)

• Tương tự như vậy, để render giá trị Array ra một list ta làm như sau:

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => 
    <li>{number * 2}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

Hiển thị trình duyệt

Render giá trị Array viết dạng component

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number * 2}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

Hiển thị trình duyệt

• Ta thấy kết quả vẫn hiển thị như mong muốn, tuy nhiên lúc này khi xem output console (Nhấn F12), thì sẽ thấy thông báo Warning: Each child in a list should have a unique "key" prop..
• Thuộc tính key cần được thêm khi tạo list, xem bài tiếp theo nhé.