Bài 11: ReactJS - sử dụng Keys trong React

Key được sử dụng trong React khi một component return một mảng phần tử hoặc một danh sách các phần tử. Key giúp react xác định các phần tử trong mảng hoặc danh sách, phần tử nào đươc thêm vào, phần tử nào được update hay remove...

Sử dụng Key

Giờ chúng ta sẽ tạo một component tên là Content với unique index( tạm dịch là chỉ mục duy nhất) là i được chứa trong App component. Trong component App, function map sẽ tạo ra 3 element từ mảng data chứa trong state. Sau đó ta sẽ gán Key cho từng element đó bằng với i ở trên, lưu ý là Key dùng để định danh các phần tử nên giá trị của nó cần duy nhất, không được trùng. Khá rối nhỉ @@, các bạn xem ví dụ để hiểu rõ hơn. Các bạn xem ở đây nếu không biết function map.

App.js

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
  
      this.state = {
         data:[
            {
               component: 'First...',
               id: 1
            },
            {
               component: 'Second...',
               id: 2
            },
            {
               component: 'Third...',
               id: 3
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <div>
               {this.state.data.map((dynamicComponent, i) => <Content 
                  key = {i} componentData = {dynamicComponent}/>)}
            </div>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <div>{this.props.componentData.component}</div>
            <div>{this.props.componentData.id}</div>
         </div>
      );
   }
}
export default App;

App sẽ render và return ra 3 thằng Content, mỗi thằng sẽ có 1 key duy nhất ứng với i.

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Kết quả ta được:

Các bạn có thể vận dụng kiến thức các bài trước để update thêm bài này, tìm cách thêm xóa sửa component Content thì React sẽ sử dụng key để xác định các component bị tác động.

Nếu các bạn bỏ thành phần key={i} trong lúc render thì trong console sẽ xuất hiện lỗi sau:

Kết thúc bài 11 ở đây, các bạn xem lại rồi thực hành thêm để hiểu rõ hơn nha. Chúc các bạn học tốt.

Bài 12: ReactJS - tìm hiểu về Animations trong React