Translate fully List and Key page.

Author: NhanHoang8195

content/docs/lists-and-keys.md

@@ -6,7 +6,7 @@ prev: conditional-rendering.html
 next: forms.html
 ---
 
-Đầu tiên, hãy xem lại cách bạn chuyển đổi danh sách trong Javascript.
+Đầu tiên, hãy xem lại cách bạn chuyển đổi danh sách (lists) trong Javascript.
 
 Trong đoạn code bên dưới, chúng ta sử dụng hàm [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) để nhân đôi giá trị của từng phần tử trong mảng `numbers`. Chúng ta gán mảng mới là kết quả trả về từ hàm `map()` vào biến `doubled` và xuất kết quả đó ra:
 
@@ -18,13 +18,13 @@ console.log(doubled);
 
 Đoạn code trên xuất kết quả `[2, 4, 6, 8, 10]` ra màn hình console.
 
-Trong React, việc chuyển đổi mảng các phần tử thành danh sách của các [element](/docs/rendering-elements.html) là gần như giống hệt nhau.
+Trong React, việc chuyển đổi mảng các phần tử thành danh sách (arrays into lists) của các [element](/docs/rendering-elements.html) là gần như giống hệt nhau.
 
 ### Render Nhiều Component {#rendering-multiple-components}
 
-Bạn có thể xây dựng các tập hợp của các element và [nhúng những tập hợp element này vào JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) bằng việc sử dụng dấu ngoặc nhọn `{}`.
+Bạn có thể xây dựng nhiều tập hợp (collections) của các element và [nhúng những tập hợp element này vào JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) bằng việc sử dụng dấu ngoặc nhọn `{}`.
 
-Dưới đây, chúng ta sử dụng vòng lặp trên mảng `numbers` và sử dụng hàm [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) trong JavaScript. Kết quả trả về là một thẻ `<li>` cho mỗi vòng lặp. Cuối cùng, chúng ta gán mảng kết quả gồm những element cho `listItems`:
+Dưới đây, chúng ta sử dụng vòng lặp trên mảng `numbers` và sử dụng hàm [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) trong JavaScript. Kết quả trả về là một thẻ `<li>` cho mỗi vòng lặp. Cuối cùng, chúng ta gán mảng kết quả gồm những element (thẻ `<li>`) cho `listItems`:
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -42,15 +42,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
+[**Chạy thử trên CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
-Đoạn code trên hiển thị một danh sách dấu chấm tròn đứng trước các số từ 1 đến 5.
+Đoạn code trên hiển thị một danh sách từ 1 đến 5 và có chứa các dấu chấm tròn trước mỗi số.
 
-### Danh Sách Component cơ bản {#basic-list-component}
+### Component Có Danh Sách Cơ Bản (Basic List Component) {#basic-list-component}
 
 Thông thường bạn sẽ render các danh sách trong một [component](/docs/components-and-props.html).
 
-Chúng ta có thể điều chỉnh để đưa đoạn code trong ví dụ trước vào một component và trong component đó nhận một mảng `numbers` và xuất ra danh sách các element.
+Chúng ta có thể điều chỉnh để đưa đoạn code trong ví dụ trước vào một component và trong component đó sẽ nhận một mảng `numbers` và xuất ra danh sách các element.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -72,9 +72,9 @@ ReactDOM.render(
 );
 ```
 
-Khi bạn chạy đoạn code này, bạn sẽ nhận một thông báo lưu ý rằng một thuộc tính key nên được truyền vào cho mỗi phần tử. Một "key" là một thuộc tính chuỗi đặc biệt bạn cần phải đưa vào khi tạo danh sách các element. Chúng ta sẽ thảo luận tại sao điều này lại quan trọng trong mục kế tiếp.
+Khi bạn chạy đoạn code này, bạn sẽ nhận một thông báo lưu ý rằng một thuộc tính key nên được truyền vào cho mỗi phần tử (thẻ `<li>` bên trong hàm `map()`). Một "key" là một thuộc tính chuỗi đặc biệt bạn cần phải đưa vào khi tạo danh sách các element. Chúng ta sẽ thảo luận tại sao điều này lại quan trọng trong mục kế tiếp.
 
-Hãy gán một `key` vào danh sách các phần tử của chúng ta bên trong `numbers.map()` và sửa cảnh báo bị thiếu key lúc nãy.
+Hãy gán `key` vào từng phần tử của chúng ta bên trong `numbers.map()` và sửa cảnh báo bị thiếu key lúc nãy.
 
 ```javascript{4}
 function NumberList(props) {
@@ -96,11 +96,11 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
+[**Chạy thử trên CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
 
 ## Keys {#keys}
 
-Các key giúp React xác định những phần tử nào đã thay đổi, được thêm, hay bị xóa. Các key nên được truyền vào các element bên trong một mảng để cho các element này có một định danh ổn định:
+Các key giúp React xác định những phần tử nào đã thay đổi, được thêm, hay bị xóa. Các key nên được truyền vào các element bên trong một mảng để cho các element này có một định danh cố định (stable identity):
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -111,7 +111,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-Các tốt nhất để chọn một key là sử dụng một chuỗi mà được xác định là duy nhất trong một danh sách các phần tử. Cách thông thường nhất mà bạn sẽ sử dụng là dùng các ID từ dữ liệu của bạn như là key:
+Các tốt nhất để chọn một key là sử dụng một chuỗi mà được xác định là duy nhất trong các nút anh em (siblings). Cách thông thường nhất mà bạn sẽ sử dụng là dùng các ID từ dữ liệu của bạn làm key:
 
 ```js{2}
 const todoItems = todos.map((todo) =>
@@ -121,34 +121,34 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-Khi bạn không có các ID ổn định cho việc render các phần tử, bạn có thể sử dụng thứ tự của phần tử đó trong danh sách như là một key cũng như là một phương án cuối cùng:
+Khi bạn không có các ID cố định (stable IDs) cho việc render các phần tử, bạn có thể sử dụng thứ tự của phần tử đó trong danh sách như là một key cũng như là một phương án cuối cùng:
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
-  // Only do this if items have no stable IDs
+  // Chỉ làm điều này khi không có ID cố định
   <li key={index}>
     {todo.text}
   </li>
 );
 ```
 
-Chúng tôi không khuyến khích sử dụng các thứ tự của phần tử cho các key nếu thứ tự của các phần tử có thể thay đổi. Điều này có thể ảnh hưởng đến hiệu suất và có thể gây ra một vài vấn đề với state của component. Xem qua bài viết của Robin Pokorny về việc [giải thích ảnh hưởng tiêu cực của việc sử dụng thứ tự phần tử cho key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Nếu bạn lựa chọn việc không gán cho key một định danh rõ ràng thì mặc định React sẽ sử dựng thứ tự của phần tử cho key.
+Chúng tôi không khuyến khích sử dụng thứ tự của các phần tử cho các key nếu thứ tự của các phần tử có thể thay đổi. Điều này có thể ảnh hưởng đến hiệu suất và có thể gây ra một vài vấn đề với state của component. Xem qua bài viết của Robin Pokorny về việc [giải thích ảnh hưởng tiêu cực của việc sử dụng thứ tự phần tử cho key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Nếu bạn lựa chọn việc không gán cho key một định danh rõ ràng thì mặc định React sẽ sử dựng thứ tự của phần tử cho key.
 
-Đây là một [giải thích về việc tại sao các key là cần thiết](/docs/reconciliation.html#recursing-on-children) nếu bạn quan tâm nhiều về vấn đề này.
+Xem thêm [giải thích về việc tại sao các key là cần thiết](/docs/reconciliation.html#recursing-on-children) nếu bạn quan tâm nhiều về vấn đề này.
 
-### Extracting Components with Keys {#extracting-components-with-keys}
+### Chia Nhỏ Các Component Với Key {#extracting-components-with-keys}
 
-Keys only make sense in the context of the surrounding array.
+Các key chỉ hợp lí trong trường hợp liên quan đến mảng dữ liệu.
 
-For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
+Ví dụ, nếu bạn [chia nhỏ](/docs/components-and-props.html#extracting-components) component `ListItem`, bạn nên giữ việc truyền key vào các `<ListItem />` element trong mảng thay vì truyền vào thẻ `<li>` bên trong `ListItem` element.
 
-**Example: Incorrect Key Usage**
+**Ví dụ: Trường hợp sử dụng key chưa chính xác**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
-    // Wrong! There is no need to specify the key here:
+    // Sai! Ở đây không cần truyền vào key:
     <li key={value.toString()}>
       {value}
     </li>
@@ -158,7 +158,7 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Wrong! The key should have been specified here:
+    // Sai! Key nên được truyền vào ở đây:
     <ListItem value={number} />
   );
   return (
@@ -175,18 +175,18 @@ ReactDOM.render(
 );
 ```
 
-**Example: Correct Key Usage**
+**Ví dụ: Trường hợp sử dụng key chính xác**
 
 ```javascript{2,3,9,10}
 function ListItem(props) {
-  // Correct! There is no need to specify the key here:
+  // Đúng! Ở đây không cần cụ thể key:
   return <li>{props.value}</li>;
 }
 
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Correct! Key should be specified inside the array.
+    // Đúng! Key nên được cụ thể bên trong mảng.
     <ListItem key={number.toString()}
               value={number} />
   );
@@ -204,13 +204,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+[**Chạy thử trên CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-A good rule of thumb is that elements inside the `map()` call need keys.
+Một nguyên tắc nhỏ đó là các element bên trong hàm gọi `map()` cần các key.
 
-### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+### Các Key Chỉ Bắt Buộc Là Duy Nhất Giữa Các Nút Anh Em (Siblings) {#keys-must-only-be-unique-among-siblings}
 
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+Các Key được sử dụng bên trong các mảng nên là duy nhất giữa các nút anh em của chúng. Tuy nhiên chúng không cần là duy nhất đối với toàn bộ component. Chúng ta có thể sử dụng các key giống nhau khi chúng ta tạo hai mảng khác nhau:
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -248,9 +248,9 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
+[**Chạy thử trên CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
+Các key được sử dụng để gợi ý cho React nhưng chúng không được truyền vào cho các component (Nghĩa là các component con sẽ không đọc được prop.key). Nếu bạn cần đọc giá trị giống với giá trị của key bên trong component của bạn, truyền giá trị đó như một prop với một cái tên khác:
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -261,11 +261,11 @@ const content = posts.map((post) =>
 );
 ```
 
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
+Với ví dụ bên trên, component `Post` có thể đọc giá trị của `props.id`, mà không phải là `props.key`.
 
-### Embedding map() in JSX {#embedding-map-in-jsx}
+### Nhúng map() vào JSX {#embedding-map-in-jsx}
 
-In the examples above we declared a separate `listItems` variable and included it in JSX:
+Trong các ví dụ trên chúng ta đã khái báo `listItems` thành một biến riêng biệt và đưa nó vào JSX:
 
 ```js{3-6}
 function NumberList(props) {
@@ -282,7 +282,7 @@ function NumberList(props) {
 }
 ```
 
-JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
+JSX cho phép [nhúng expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) bất kì vào trong dấu ngoặc nhọn vì vậy chúng ta có thể xuất kết quả của hàm `map()` như sau:
 
 ```js{5-8}
 function NumberList(props) {
@@ -298,6 +298,6 @@ function NumberList(props) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
+[**Chạy thử trên CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+Thỉnh thoảng cách làm như trên làm code gọn gàng hơn, nhưng kiểu này cũng có thể bị lạm dụng. Như trong JavaScript, đôi khi bạn phải quyết định xem có cần phải tạo thêm một biến để cho dễ đọc hay không. Hãy nhớ rằng nếu bên trong hàm `map()` bị lồng (nested) quá nhiều, đó có thể là lúc thích hợp để [chia nhỏ một component](/docs/components-and-props.html#extracting-components).