Translate Lists and Keys

content/docs/lists-and-keys.md

@@ -1,30 +1,33 @@
 ---
 id: lists-and-keys
-title: Lists and Keys
+title: Lists dan Keys
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
 ---
 
-First, let's review how you transform lists in JavaScript.
+Pertama-tama, mari kita tinjau kembali bagaimana Anda dapat mentransformasi *list* di JavaScript.
 
-Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
+Jika melihat kode di bawah, kita menggunakan fungsi [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) untuk mengambil senarai `numbers` dan menggandakan nilainya.
+Kita akan menaruh senarai baru yang dikembalikan oleh `map()` ke dalam sebuah variabel `doubled` dan me-*log*-nya:
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
 const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-This code logs `[2, 4, 6, 8, 10]` to the console.
+Kode ini akan me-*log* `[2,4,6,8,10]` ke dalam konsol.
 
-In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
+Di React, mengubah senarai ke dalam *list* [elemen](/docs/rendering-elements.html) kurang lebih sama.
 
-### Rendering Multiple Components {#rendering-multiple-components}
+### Me-render Banyak Komponen {#rendering-multiple-components}
 
-You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
+Anda dapat membangun koleksi dari beberapa elemen dan [menyertakannya dalam JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) menggunakan tanda kurung kurawal `{}`.
 
-Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
+Di bawah ini, kita perulangan melalui senarai `numbers` menggunakan fungsi [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) JavaScript.
+Kita akan mengembalikan elemen `<li>` untuk setiap *item*.
+Akhirnya, kita akan menetapkan senarai elemen dari hasil proses tersebut ke dalam `listItems`:
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +36,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+Kita akan menyertakan seluruh senarai `listItems` ke dalam elemen `<ul>` dan [me-*render*-nya ke dalam DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
 
 ```javascript{2}
 ReactDOM.render(
@@ -42,15 +45,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
-This code displays a bullet list of numbers between 1 and 5.
+Kode ini akan menampilkan sebuah *list bullet* dari angka 1 sampai 5.
 
-### Basic List Component {#basic-list-component}
+### Daftar Komponen Dasar {#basic-list-component}
 
-Usually you would render lists inside a [component](/docs/components-and-props.html).
+Biasanya Anda akan me-*render list* di dalam sebuah [komponen](/docs/components-and-props.html).
 
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs a list of elements.
+Kita bisa me-refaktor contoh sebelumnya ke dalam sebuah komponen yang menerima senarai `numbers` dan mengeluarkan sebuah *list* elemen yang tidak berurutan.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -70,9 +73,9 @@ ReactDOM.render(
 );
 ```
 
-When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
+Ketika Anda menjalankan kode ini, Anda akan mendapatkan peringatan bahwa *key* harus disediakan untuk *item* di dalam *list*. Sebuah "*key*" adalah atribut *string* spesial yang perlu Anda sertakan dalam pembuatan *list* elemen. Kita akan mendiskusikan mengapa ini penting di bagian berikutnya.
 
-Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
+Mari kita sertakan `*key*` ke dalam *list item* kita pada `numbers.map()` dan memperbaiki masalah *key* yang hilang.
 
 ```javascript{4}
 function NumberList(props) {
@@ -94,11 +97,11 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
 
-## Keys {#keys}
+## Key {#keys}
 
-Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
+*Key* membantu React untuk mengidentifikasi *item* mana yang telah diubah, ditambahkan, atau dihilangkan. *Key* harus diberikan di dalam elemen yang terdapat di dalam sebuah senarai untuk memberikan elemen tersebut identitas yang stabil:
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +112,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
+Cara terbaik untuk menentukan *key* yang akan digunakan adalah menggunakan *string* unik untuk mengidentifikasikan *item* dalam sebuah *list* dari *list item* lain yang menjadi saudaranya. Seringkali Anda akan menggunakan ID dari data Anda sebagai *key*:
 
 ```js{2}
 const todoItems = todos.map((todo) =>
@@ -119,34 +122,35 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
+Ketika Anda tidak memiliki ID yang stabil untuk me-*render item*, Anda bisa menggunakan indeks dari *item* sebagai *key* untuk pilihan terakhir:
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
   // Only do this if items have no stable IDs
+  // Hanya lakukan ini jika *item* tidak memiliki ID yang stabil
   <li key={index}>
     {todo.text}
   </li>
 );
 ```
 
-We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+Kami tidak merekomendasikan menggunakan indeks untuk *key* jika urutan *item* nantinya berubah. Ini berdampak negatif terhadap kinerja dan dapat menyebabkan masalah dengan *state* komponen. Simak artikel Robin Pokorny untuk [penjelasan lebih dalam mengenai dampak negatif penggunaan indeks sebagai *key*](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Jika Anda memilih untuk tidak menetapkan *key* pada *list item* maka React secara bawaan akan menggunakan indeks sebagai *key*.
 
-Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
+Berikut adalah [penjelasan lebih dalam tentang kenapa *key* sangat diperlukan](/docs/reconciliation.html#recursing-on-children) Jika Anda tertarik untuk mempelajari lebih lanjut.
 
-### Extracting Components with Keys {#extracting-components-with-keys}
+### Mengekstrak Komponen dengan Key {#extracting-components-with-keys}
 
-Keys only make sense in the context of the surrounding array.
+*Key* hanya perlu digunakan di dalam konteks senarai yang mengurung *item* dengan *key* tersebut.
 
-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.
+Sebagai contoh, jika Anda [mengekstrak](/docs/components-and-props.html#extracting-components) sebuah komponen `ListItem`, Anda harus menyimpan *key* pada elemen `<ListItem />` di dalam senarai daripada di elemen `<li>` yang ada pada `ListItem`.
 
-**Example: Incorrect Key Usage**
+**Contoh: Penggunaan *Key* yang Salah**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
-    // Wrong! There is no need to specify the key here:
+    // Salah! Tidak diperlukan untuk menentukan *key* di sini:
     <li key={value.toString()}>
       {value}
     </li>
@@ -156,7 +160,7 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Wrong! The key should have been specified here:
+    // Salah! *Key* seharusnya ditentukan di sini:
     <ListItem value={number} />
   );
   return (
@@ -173,18 +177,18 @@ ReactDOM.render(
 );
 ```
 
-**Example: Correct Key Usage**
+**Contoh: Penggunaan *Key* yang Benar**
 
 ```javascript{2,3,9,10}
 function ListItem(props) {
-  // Correct! There is no need to specify the key here:
+  // Benar! Karena tidak perlu menentukan *key* di sini:
   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.
+    // Benar! *Key* harus ditentukan di dalam senarai
     <ListItem key={number.toString()}
               value={number} />
   );
@@ -202,13 +206,14 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+[**Coba di CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-A good rule of thumb is that elements inside the `map()` call need keys.
+Sebuah aturan yang mudah diingat adalah elemen di dalam pemanggilan `map()` akan membutuhkan *key*.
 
-### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+### Key Harus Bersifat Unik Diantara Saudaranya {#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:
+
+*Key* digunakan didalam senarai harus bersifat unik di antara saudaranya. Namun mereka tidak perlu unik secara global. Kita dapat menggunakan *key* yang sama ketika kita menghasilkan dua senarai yang berbeda:
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -246,9 +251,9 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
+[**Coba di 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:
+*Key* berfungsi sebagai petunjuk bagi React namun mereka tidak akan muncul di komponen Anda. Jika Anda membutuhkan nilai yang sama di dalam komponen Anda, oper secara eksplisit sebagai sebuah *props* dengan nama yang berbeda:
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -259,11 +264,11 @@ const content = posts.map((post) =>
 );
 ```
 
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
+Dengan contoh di atas, komponen `Post` dapat membaca `props.id`, bukan `props.key`.
 
-### Embedding map() in JSX {#embedding-map-in-jsx}
+### Menanamkan map() pada JSX {#embedding-map-in-jsx}
 
-In the examples above we declared a separate `listItems` variable and included it in JSX:
+Pada contoh di atas kita mendeklarasikan variabel terpisah `listItems` dan memasukkannya ke dalam JSX:
 
 ```js{3-6}
 function NumberList(props) {
@@ -280,7 +285,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 memperbolehkan [menanamkan ekspresi](/docs/introducing-jsx.html#embedding-expressions-in-jsx) di dalam tanda kurung kurawal oleh karenanya kita dapat memasukkan hasil `map()` secara *inline*:
 
 ```js{5-8}
 function NumberList(props) {
@@ -296,6 +301,7 @@ function NumberList(props) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
+[**Coba di 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).
+Terkadang penulisan seperti ini akan menghasilkan kode yang lebih jelas, namun cara seperti ini juga dapat disalahgunakan.
+Seperti di JavaScript, menjadi pilihan Anda apakah mengekstrak sebuah variabel tersendiri agar lebih mudah di baca penting bagi Anda. Perlu diingat bahwa jika di dalam `map()` terdapat banyak perulangan, bisa jadi ini adalah saat yang tepat untuk [mengekstrak sebuah komponen](/docs/components-and-props.html#extracting-components).