React.js state với map()
- Bài học này sẽ áp dụng
map()vào mộtstatethực tế, mục đích giúp các bạn hình dung rõ hơn việc ứng dụngmap()để list ra một danh sách từ dữ liệu ban đầu. - Trước tiên ta xét ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="member"></div>
<script type="text/babel">
class Member extends React.Component {
constructor(props) {
super(props);
this.state = {
users: [
{
id: 1,
name: "Bùi Văn Tèo",
age: 25
},
{
id: 2,
name: "Trần Văn An",
age: 29
},
{
id: 3,
name: "Nguyễn Thị Bưởi",
age: 22
}
],
job: "IT Communicator"
};
};
render() {
return (
<div>
<strong>Tên: </strong>
<p>Tuổi: </p>
</div>
);
};
};
ReactDOM.render(
<Member />,
document.getElementById('member')
);
</script>
</body>
</html>
- Nội dung trên đã được giới thiệu tại bài setState rồi nhe, các bạn cần thì có thể xem lại.
- Ta sẽ áp dụng
map()để list ra một danh sách bằng cách viết lạirendernhư sau:
render() {
return (
<div>
<ul>
{this.state.users.map(item => (
<li key={item.id}>
<strong>Tên: {item.name}</strong>
<p>Tuổi: {item.age}</p>
</li>
))}
</ul>
</div>
);
};
Hiển thị trình duyệt
-
Tên: Bùi Văn Tèo
Tuổi: 25 -
Tên: Trần Văn An
Tuổi: 29 -
Tên: Nguyễn Thị Bưởi
Tuổi: 22
- Không phức tạp lắm đúng không ^^
- Bài tiếp theo chúng ta sẽ xem xét sử dụng map để thực hiện một setState (cập nhật một nội dung nào đó) nhé!