Hướng dẫn ReactJS ReactJS tutorial (p11) Bài 11: ReactJS sử dụng Keys trong React

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) => 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.