React.js Array to list
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 […]
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)
[2, 4, 6, 8, 10]
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
- 2
- 4
- 6
- 8
- 10
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
- 2
- 4
- 6
- 8
- 10
- 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é.
