React.js setState với map()

React.js setState với map()

  • Bài học này sẽ giúp các bạn biết cách áp dụng map() vào setState để cập nhật một mục bất kỳ trong một mãng cho trước.
  • Tiếp theo bài trước ta có nội dung 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>
            <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>
          );
        };
      };

      ReactDOM.render(
        <Member />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

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ử!

  • Để cập nhật nội dung trên, ta cần một <button> và một function xử lý nội dung cập nhật, ta thêm nội dung trên như sau:
  changeItem = () => {
    this.setState(

    );
  };

  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>
        <button type="button" onClick={this.changeItem}>Update</button>
      </div>
    );
  };
  • Giả sử ta cần cập nhật name và age ở mục có id: 2.
  • Ta chỉnh lại function changeItem như sau:
  changeItem = () => {
    let key = 2;

    this.setState(prevState => ({
      users: prevState.users.map(
        item => item.id === key? {
          ...item,
          name: 'Dương Minh Trí',
          age: 4
        }: item
      )
    }));
  };
  • let key = 2;, thực tế trong việc update, khi click vào liên kết update sẽ trả về giá trị id của mục cần được update, key này sẽ đại diện cho id đó.
  • item.id === key, nếu item.id bằng với key thì tiến hành cập nhật nội dung, không thì trả về item.

Hiển thị trình duyệt sau khi click vào button

  • Tên: Bùi Văn Tèo

    Tuổi: 25

  • Tên: Dương Minh Trí

    Tuổi: 4

  • Tên: Nguyễn Thị Bưởi

    Tuổi: 22

Làm thử!

  • Ta thấy nội dung có id: 2 đã được cập nhật khi click vào button.
  • Nội dung bài này sẽ được áp dụng rất nhiều khi bạn muốn cập nhật một mãng bất kỳ, nên các bạn cần xem kỹ nhé.

React.js - state với map()

Project với Component