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/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@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>
              <h2>Tên: </h2>
              <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}>
              <h2>Tên: {item.name}</h2>
              <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

Làm thử!

  • 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é!

React.js - nhúng map() vào JSX

React.js - setState với map()