Bài 21: React.js state với map()

React.js state với map()

  • Bài học này sẽ áp dụng map() vào một state thực tế, mục đích giúp các bạn hình dung rõ hơn việc ứng dụng map() để 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/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/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ại render như 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é!
Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *