` yang lebih panjang](/reference/react/Fragment#rendering-a-list-of-fragments):
```js
import { Fragment } from 'react';
@@ -393,46 +395,46 @@ const listItems = people.map(person =>
);
```
-Fragments disappear from the DOM, so this will produce a flat list of ``, `
`, `
`, `
`, and so on.
+Pada akhirnya, `Fragment` akan hilang dari DOM dan hanya menyisakan `
`, `
`, `
`, `
`, dan seterusnya, pada contoh di atas.
-### Where to get your `key` {/*where-to-get-your-key*/}
+### Bagaimana Anda memperoleh `key` {/*where-to-get-your-key*/}
-Different sources of data provide different sources of keys:
+Sumber data yang berbeda akan memberikan `key` yang berbeda juga, contoh:
-* **Data from a database:** If your data is coming from a database, you can use the database keys/IDs, which are unique by nature.
-* **Locally generated data:** If your data is generated and persisted locally (e.g. notes in a note-taking app), use an incrementing counter, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID) or a package like [`uuid`](https://www.npmjs.com/package/uuid) when creating items.
+* **Data dari basis data:** Jika data yang digunakan berasal dari basis data, ID dapat digunakan sebagai `key` karena sifatnya yang sudah unik.
+* **Data lokal:** Jika data dihasilkan dan disimpan secara lokal (seperti catatan pada aplikasi penulisan catatan), Anda dapat menggunakan *counter* yang bertambah, [`crypto.randomUUID()`](https://developer.mozilla.org/en-US/docs/Web/API/Crypto/randomUUID), atau *library* seperti [`uuid`](https://www.npmjs.com/package/uuid).
-### Rules of keys {/*rules-of-keys*/}
+### Aturan `key` {/*rules-of-keys*/}
-* **Keys must be unique among siblings.** However, it’s okay to use the same keys for JSX nodes in _different_ arrays.
-* **Keys must not change** or that defeats their purpose! Don't generate them while rendering.
+* **`Key` harus bersifat unik antar-*sibling*.** Namun, `key` yang sama bisa digunakan lagi di senarai yang berbeda.
+* **`Key` tidak boleh berubah** atau fungsinya akan hilang! Jangan membuat `key` di saat me-*render*.
-### Why does React need keys? {/*why-does-react-need-keys*/}
+### Mengapa React membutuhkan `key`? {/*why-does-react-need-keys*/}
-Imagine that files on your desktop didn't have names. Instead, you'd refer to them by their order -- the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.
+Bayangkan jika *file* yang ada di komputer Anda tidak memiliki nama. Sebagai pengganti, Anda merujuk ke *file* tersebut dengan urutannya--file pertama, file kedua, dan seterusnya. Saat *file* pertama dihapus, *file* kedua akan menjadi *file* pertama, kemudian *file* ketiga akan menjadi *file* kedua, dan seterusnya. Perujukan *file* menjadi tidak konsisten.
-File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the _position_ changes due to reordering, the `key` lets React identify the item throughout its lifetime.
+Nama file pada folder dan `key` pada JSX memiliki tujuan yang serupa. Mereka membantu kita mengidentifikasi anggota senarai dan membedakan mereka antar-*sibling*. `Key` yang baik tidak hanya memberikan informasi mengenai posisi *item* di dalam senarai, tetapi juga membantu React mengidentifikasi *item* tersebut sepanjang hidupnya.
-You might be tempted to use an item's index in the array as its key. In fact, that's what React will use if you don't specify a `key` at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.
+Anda mungkin tertarik untuk menggunakan indeks pada senarai sebagai `key`. Sebenarnya, itulah yang digunakan React jika Anda tidak memberikan `key`. Namun, urutan anggota senarai dapat berubah saat ada yang ditambah, dihapus, atau diubah urutannya. Jika ini terjadi, ini bisa menimbulkan *bug* yang membingungkan dan sulit ditemukan.
-Similarly, do not generate keys on the fly, e.g. with `key={Math.random()}`. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.
+Bukan hanya itu, sebaiknya juga tidak membuat `key` sembarangan, misal `key={Math.random()}`. Hal ini menyebabkan `key` baru dibuat setiap *render*. Akibatnya, komponen dan DOM juga ikut dibuat baru setiap *render*. Pada akhirnya, proses *render* akan menjadi lambat dan masukan dari pengguna juga akan hilang. Oleh karena itu, sebaiknya Anda menggunakan ID yang konsisten yang berasal dari data.
-Note that your components won't receive `key` as a prop. It's only used as a hint by React itself. If your component needs an ID, you have to pass it as a separate prop: ``.
+Perlu diperhatikan bahwa komponen tidak bisa membaca `key`, layaknya sebuah *prop*. `Key` hanya digunakan oleh React. Jika komponen Anda membutuhkan ID, Anda harus menggunakan *prop* yang berbeda, contoh ``.
-On this page you learned:
+Pada halaman ini, Anda telah mempelajari:
-* How to move data out of components and into data structures like arrays and objects.
-* How to generate sets of similar components with JavaScript's `map()`.
-* How to create arrays of filtered items with JavaScript's `filter()`.
-* Why and how to set `key` on each component in a collection so React can keep track of each of them even if their position or data changes.
+* Bagaimana memindahkan data dari komponen ke senarai atau objek.
+* Bagaimana membuat himpunan komponen yang serupa dengan menggunakan *method* `map()`.
+* Bagaimana membuat senarai dari *item* yang memenuhi suatu kondisi menggunakan *method* `filter()`.
+* Mengapa dan bagaimana menentukan `key` untuk setiap komponen pada sebuah *collection* sehingga React bisa melakukan *render* yang optimal meskipun terdapat perubahan pada posisi atau data.
@@ -440,11 +442,11 @@ On this page you learned:
-#### Splitting a list in two {/*splitting-a-list-in-two*/}
+#### Membagi sebuah daftar menjadi dua {/*splitting-a-list-in-two*/}
-This example shows a list of all people.
+Pada contoh ini, terdapat sebuah daftar orang.
-Change it to show two separate lists one after another: **Chemists** and **Everyone Else.** Like previously, you can determine whether a person is a chemist by checking if `person.profession === 'chemist'`.
+Anda diminta untuk menampilkan dua daftar berbeda, satu setelah yang lain: ***Chemists*** dan ***Bukan Chemist***. Seperti sebelumnya, Anda bisa melihat apakah seseorang berprofesi sebagai *chemist* dengan menggunakan `person.profession === 'chemist'`.
@@ -535,7 +537,7 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-You could use `filter()` twice, creating two separate arrays, and then `map` over both of them:
+Anda bisa menggunakan `filter()` dua kali, menghasilkan dua senarai, kemudian aplikasikan `map()` ke dua senarai tersebut:
@@ -648,9 +650,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-In this solution, the `map` calls are placed directly inline into the parent `` elements, but you could introduce variables for them if you find that more readable.
+Pada solusi ini, `map()` dipanggil secara *inline* ke dalam elemen ``, tetapi jika Anda merasa ini masih agak sulit dibaca, Anda bisa menambahkan variabel baru yang menyimpan senarai tersebut.
-There is still a bit duplication between the rendered lists. You can go further and extract the repetitive parts into a `` component:
+Sebenarnya, masih ada duplikasi pada dua daftar yang dibuat. Anda bisa mengekstrak bagian yang duplikat ke dalam sebuah komponen ``:
@@ -762,9 +764,9 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-A very attentive reader might notice that with two `filter` calls, we check each person's profession twice. Checking a property is very fast, so in this example it's fine. If your logic was more expensive than that, you could replace the `filter` calls with a loop that manually constructs the arrays and checks each person once.
+Bagi pembaca yang sangat teliti, Anda mungkin menyadari pemanggilan `filter()` dua kali mengakibatkan setiap orang dari senarai `people` akan dicek dua kali. Untungnya, pengecekan sebuah *property* objek itu cukup cepat sehingga itu bukan menjadi masalah pada kasus ini. Namun, jika komputasi yang dilakukan lebih mahal, Anda bisa mengganti `filter()` dengan pengulangan manual yang membuat dua senarai sekaligus. Dengan begitu, setiap orang hanya perlu dicek sekali.
-In fact, if `people` never change, you could move this code out of your component. From React's perspective, all that matters is that you give it an array of JSX nodes in the end. It doesn't care how you produce that array:
+Bahkan, jika `people` tidak pernah berubah, Anda bisa menempatkan kode ini di luar komponen Anda. React hanya menginginkan sebuah senarai berisi *node* JSX. React tidak peduli bagaimana Anda dapat memperoleh senarai tersebut:
@@ -882,13 +884,13 @@ img { width: 100px; height: 100px; border-radius: 50%; }
-#### Nested lists in one component {/*nested-lists-in-one-component*/}
+#### Daftar bersarang dalam satu komponen {/*nested-lists-in-one-component*/}
-Make a list of recipes from this array! For each recipe in the array, display its name as an `` and list its ingredients in a ``.
+Anda diminta untuk membuat sebuah daftar resep dari sebuah senarai yang telah disediakan. Untuk setiap resep yang ada di dalam senarai, Anda diminta untuk menampilkan nama sebagai `` dan daftar bahannya di dalam ``.
-This will require nesting two different `map` calls.
+Tantangan ini membutuhkan Anda untuk membuat dua pemanggilan `map()` yang bersarang.
@@ -926,7 +928,7 @@ export const recipes = [{
-Here is one way you could go about it:
+Salah satu solusinya seperti berikut:
@@ -972,13 +974,13 @@ export const recipes = [{
-Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
+Setiap anggota dari `recipes` memiliki *property* `id` yang dapat digunakan di pengulangan sebelah luar sebagai `key`. Namun, hal yang sama tidak berlaku untuk daftar bahan. Walaupun begitu, cukup wajar untuk berasumsi sebuah bahan tidak akan dipakai dua kali di dalam satu resep, sehingga *property* `name` bisa digunakan sebagai `key`. Jika Anda tidak puas dengan hal tersebut, Anda juga bisa mengubah struktur data dan menambahkan ID ke setiap bahan dari setiap resep. Anda juga bisa menggunakan indeks pada senarai sebagai `key`, tetapi Anda tidak bisa mengubah urutan bahan-bahan tersebut.
-#### Extracting a list item component {/*extracting-a-list-item-component*/}
+#### Mengekstrak sebuah komponen daftar *item* {/*extracting-a-list-item-component*/}
-This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
+Komponen `RecipeList` mengandung dua pemanggilan `map()` yang bersarang. Untuk menyederhanakannya, Anda diminta untuk mengekstrak sebuah komponen `Recipe` yang menerima *prop*, yaitu `id`, `name`, dan `ingredients`. Di mana Anda harus meletakkan `key` dan mengapa?
@@ -1026,7 +1028,7 @@ export const recipes = [{
-You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
+Anda bisa menyalin JSX dari `map()` sebelah luar ke dalam sebuah komponen baru, yaitu `Recipe` dan mengembalikan JSX tersebut. Setelah itu, Anda dapat mengubah `recipe.name` menjadi `name`, `recipe.id` menjadi `id`, dan seterusnya. Nantinya, nilai-nilai tersebut dapat diperoleh melalui *prop* dari `Recipe`:
@@ -1078,15 +1080,15 @@ export const recipes = [{
-Here, `` is a syntax shortcut saying "pass all properties of the `recipe` object as props to the `Recipe` component". You could also write each prop explicitly: ``.
+`` adalah sintaksis singkat yang berarti menyerahkan semua *property* dari objek `recipe` sebagai *prop* ke komponen `Recipe`. Anda juga bisa menuliskannya secara eksplisit seperti ``.
-**Note that the `key` is specified on the `` itself rather than on the root `` returned from `Recipe`.** This is because this `key` is needed directly within the context of the surrounding array. Previously, you had an array of `
`s so each of them needed a `key`, but now you have an array of `
`s. In other words, when you extract a component, don't forget to leave the `key` outside the JSX you copy and paste.
+**Perhatikan bahwa `key` diletakkan di ``, bukan pada `` akar yang dikembalikan dari komponen `Recipe`.** Ini disebabkan `key` dibutuhkan di konteks yang sama dengan senarai. Sebelumnya, Anda membuat senarai `
` sehingga setiap `div` membutuhkan `key`. Namun, sekarang Anda membuat senarai `
`. Oleh karena itu, jika Anda mengekstrak komponen, jangan lupa untuk menaruh `key` di luar JSX yang Anda salin.
-#### List with a separator {/*list-with-a-separator*/}
+#### Daftar dengan pemisah {/*list-with-a-separator*/}
-This example renders a famous haiku by Katsushika Hokusai, with each line wrapped in a `` tag. Your job is to insert an `
` separator between each paragraph. Your resulting structure should look like this:
+Pada contoh ini, terdapat sebuah *haiku* terkenal dari Katsushika Hokusai yang setiap barisnya dibungkus ``. Anda diminta untuk menambahkan `
` di antara setiap baris sebagai pemisah. Hasil akhirnya akan menyerupai ini:
```js
@@ -1098,7 +1100,7 @@ This example renders a famous haiku by Katsushika Hokusai, with each line wrappe
```
-A haiku only contains three lines, but your solution should work with any number of lines. Note that `
` elements only appear *between* the `` elements, not in the beginning or the end!
+Sebuah *haiku* hanya terdiri atas tiga baris, tetapi solusi Anda harus berlaku untuk sembarang jumlah baris. Perhatikan bahwa `
` hanya muncul *di antara* ``, tidak di awal maupun di akhir!
@@ -1141,17 +1143,17 @@ hr {
-(This is a rare case where index as a key is acceptable because a poem's lines will never reorder.)
+(Ini merupakan kasus langka karena Anda bisa menggunakan indeks pada senarai sebagai `key` sebab urutan baris tidak akan berubah.)
-You'll either need to convert `map` to a manual loop, or use a fragment.
+Anda bisa mengubah `map()` ke pengulangan manual atau menggunakan `Fragment`.
-You can write a manual loop, inserting `
` and `...
` into the output array as you go:
+Anda bisa membuat pengulangan manual dengan memasukkan `
` dan `...
` ke senarai luaran seiring pengulangan berlangsung:
@@ -1167,7 +1169,7 @@ const poem = {
export default function Poem() {
let output = [];
- // Fill the output array
+ // Isi senarai luaran
poem.lines.forEach((line, i) => {
output.push(
@@ -1178,7 +1180,7 @@ export default function Poem() {
);
});
- // Remove the first
+ // Hapus
pertama
output.shift();
return (
@@ -1206,9 +1208,9 @@ hr {
-Using the original line index as a `key` doesn't work anymore because each separator and paragraph are now in the same array. However, you can give each of them a distinct key using a suffix, e.g. `key={i + '-text'}`.
+Penggunakan indeks baris sebagai `key` tidak bisa dilakukan karena setiap pemisah dan baris berada di senarai yang sama. Namun, hal ini bisa dihindari dengan menambahkan akhiran seperti `key={i + '-text'}`.
-Alternatively, you could render a collection of fragments which contain `
` and `...
`. However, the `<>...` shorthand syntax doesn't support passing keys, so you'd have to write `` explicitly:
+Anda juga bisa me-*render* sebuah kumpulan fragmen yang mengandung `
` dan `...
`. Meskipun begitu, sintaksis singkat `<>...` tidak dapat digunakan karena tidak mendukung penggunaan `key`. Oleh karena itu, Anda harus menuliskan `` secara eksplisit:
@@ -1254,7 +1256,7 @@ hr {
-Remember, fragments (often written as `<> `) let you group JSX nodes without adding extra ``s!
+Ingat, fragmen (biasa ditulis `<> `) memberi cara bagi Anda untuk menggabungkan beberapa *node* JSX tanpa perlu menambahkan `
` di bagian luar!