From b0403a13d5644e474f3ba5a6c24d8a03542efccd Mon Sep 17 00:00:00 2001
From: andriansanto <58908029+andriansanto@users.noreply.github.com>
Date: Tue, 2 May 2023 09:14:52 +0700
Subject: [PATCH 1/5] Update conditional-rendering.md
---
src/content/learn/conditional-rendering.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index cfd52320a..075cbece0 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -4,7 +4,7 @@ title: Conditional Rendering
-Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
+Komponen anda akan sering untuk menampilkan tampilan yang berbeda tergantung dari beberapa kondisi yang berbeda. Di React, anda dapat melakukan render jsx menggunakan bahasa JavaScript seperti `if` statements, `&&`, dan `? :` operator.
From 35c8665f4f511e17e2aa88c5b8e4679286607be1 Mon Sep 17 00:00:00 2001
From: andriansanto <58908029+andriansanto@users.noreply.github.com>
Date: Tue, 2 May 2023 09:14:52 +0700
Subject: [PATCH 2/5] docs: translation for conditional rendering
From 3841e4d920918e6f81824e8f356e3f196ad3a9b6 Mon Sep 17 00:00:00 2001
From: Andrian Santo
Date: Tue, 2 May 2023 23:04:37 +0700
Subject: [PATCH 3/5] docs translating - conditional rendering: conditionally
returning jsx, returning nothing with null, including JSX, ternary operator,
logical operator &&,
---
src/content/learn/conditional-rendering.md | 86 +++++++++++-----------
1 file changed, 43 insertions(+), 43 deletions(-)
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 075cbece0..4a5ee6f48 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -4,21 +4,21 @@ title: Conditional Rendering
-Komponen anda akan sering untuk menampilkan tampilan yang berbeda tergantung dari beberapa kondisi yang berbeda. Di React, anda dapat melakukan render jsx menggunakan bahasa JavaScript seperti `if` statements, `&&`, dan `? :` operator.
+Komponen anda sering diperlukan untuk menampilkan hal yang berbeda tergantung dari beberapa kondisi yang berbeda. Di React, anda dapat melakukan render JSX secara bersyarat menggunakan sintaks JavaScript seperti pernyataan `if`, `&&`, dan `? :` operator.
-* How to return different JSX depending on a condition
-* How to conditionally include or exclude a piece of JSX
-* Common conditional syntax shortcuts you’ll encounter in React codebases
+* Cara mengembalikan JSX yang berbeda tergantung dari suatu kondisi
+* Bagaimana cara memasukkan atau mengecualikan sepotong JSX secara bersyarat
+* Pintasan sintaks bersyarat umum yang akan anda temukan di basis kode React
-## Conditionally returning JSX {/*conditionally-returning-jsx*/}
+## Mengembalikan JSX secara Bersyarat {/*conditionally-returning-jsx*/}
-Let’s say you have a `PackingList` component rendering several `Item`s, which can be marked as packed or not:
+Katakanlah anda memiliki komponen `PackingList` yang melakukan render pada beberapa `Item`s, yang dapat ditandai secara dikemas atau tidak:
@@ -30,7 +30,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✔) to packed items if `isPacked={true}`.
+Perhatikan bahwa beberapa komponen `Item` memiliki properti `isPacked` yang disetel menjadi `true` daripada `false`. Anda ingin menambahkan tanda centang (✔) ke `Item` yang dikemas jika `isPacked={true}`.
-You can write this as an [`if`/`else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) like so:
+Anda dapat menulis ini sebagai pernyataan [`if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) seperti ini:
```js
if (isPacked) {
@@ -63,7 +63,7 @@ if (isPacked) {
return
- {name}
;
```
-If the `isPacked` prop is `true`, this code **returns a different JSX tree.** With this change, some of the items get a checkmark at the end:
+Jika properti `isPacked` adalah `true`, kode ini **mengembalikan JSX tree yang berbeda.** Dengan perubahan ini, beberapa `item` mendapat tanda centang di bagian akhir:
@@ -78,7 +78,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-Try editing what gets returned in either case, and see how the result changes!
+Coba melakukan edit apa yang dikembalikan dalam kedua kasus tersebut, dan lihat bagaimana hasilnya berubah!
-Notice how you're creating branching logic with JavaScript's `if` and `return` statements. In React, control flow (like conditions) is handled by JavaScript.
+Perhatikan bagaimana anda membuat logika bercabang dengan pernyataan `if` dan `return` menggunakan JavaScript. Di React, alur kontrol (seperti kondisi) ditangani oleh JavaScript.
-### Conditionally returning nothing with `null` {/*conditionally-returning-nothing-with-null*/}
+### Tidak mengembalikan apa pun secara bersyarat dengan `null` {/*conditionally-returning-nothing-with-null*/}
-In some situations, you won't want to render anything at all. For example, say you don't want to show packed items at all. A component must return something. In this case, you can return `null`:
+Dalam kondisi tertentu, anda tidak ingin me-*render* apa pun. Sebagai Contoh, katakan anda tidak mau menampilkan `item` yang dikemas. Sebuah komponen harus mengembalikan sesuatu. Dalam kasus ini, anda dapat mengambalikan `null`:
```js
if (isPacked) {
@@ -115,7 +115,7 @@ if (isPacked) {
return
- {name}
;
```
-If `isPacked` is true, the component will return nothing, `null`. Otherwise, it will return JSX to render.
+Jika `isPacked` adalah `true`, komponen tidak akan mengembalikan apa pun, `null`. Jika tidak, itu akan mengembalikan JSX untuk di-*render*.
@@ -130,7 +130,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-In practice, returning `null` from a component isn't common because it might surprise a developer trying to render it. More often, you would conditionally include or exclude the component in the parent component's JSX. Here's how to do that!
+Dalam praktiknya, mengembalikan `null` dari sebuah komponen itu tidak umum karena dapat mengejutkan *developer* yang mencoba untuk me-*render*-nya. Lebih sering, anda akan menyertakan atau mengecualikan komponen secara bersyarat di komponen induk JSX. Berikut adalah cara untuk melakukannya!
-## Conditionally including JSX {/*conditionally-including-jsx*/}
+## Secara Bersyarat memasukkan JSX {/*conditionally-including-jsx*/}
-In the previous example, you controlled which (if any!) JSX tree would be returned by the component. You may already have noticed some duplication in the render output:
+Pada contoh sebelumnya, anda mengontrol JSX *tree* mana (*if any!*) yang akan dikembalikan oleh komponen. Anda mungkin telah memperhatikan beberapa duplikasi dalam hasil *render*:
```js
- {name} ✔
```
-is very similar to
+mirip dengan
```js
- {name}
```
-Both of the conditional branches return `- ...
`:
+Kedua *branches* bersyarat tersebut mengembalikan `- ...
`:
```js
if (isPacked) {
@@ -177,13 +177,13 @@ if (isPacked) {
return - {name}
;
```
-While this duplication isn't harmful, it could make your code harder to maintain. What if you want to change the `className`? You'd have to do it in two places in your code! In such a situation, you could conditionally include a little JSX to make your code more [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+Meskipun duplikasi ini tidak berbahaya, ini dapat membuka kode anda lebih susah untuk di-*maintain*. Bagaimana jika anda ingi mengganti `className`nya? Anda harus melakukannya di dua tempat dalam kode anda! Dalam situasi seperti itu, anda dapat menyertakan sedikit JSX secara bersyarat untuk membuat kode anda lebih [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
-### Conditional (ternary) operator (`? :`) {/*conditional-ternary-operator--*/}
+### Operator (`? :`) bersyarat (ternary) {/*conditional-ternary-operator--*/}
-JavaScript has a compact syntax for writing a conditional expression -- the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) or "ternary operator".
+JavaScript memiliki syntax yang ringkas untuk menulis ekspresi bersyarat -- [operator bersyarat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) atau sering disebut sebagai *"ternary operator"*.
-Instead of this:
+Daripada ini:
```js
if (isPacked) {
@@ -192,7 +192,7 @@ if (isPacked) {
return - {name}
;
```
-You can write this:
+Anda dapat menulis ini:
```js
return (
@@ -202,17 +202,17 @@ return (
);
```
-You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✔'`, otherwise (`:`) render `name`"*.
+anda dapat membacanya sebagai *"jika `isPacked` adalah `true`, maka (`?`) render `name + ' ✔'`, jika tidak (`:`) render `name`"*.
-#### Are these two examples fully equivalent? {/*are-these-two-examples-fully-equivalent*/}
+#### Apakah kedua contoh tersebut sepenuhnya sama? {/*are-these-two-examples-fully-equivalent*/}
-If you're coming from an object-oriented programming background, you might assume that the two examples above are subtly different because one of them may create two different "instances" of `- `. But JSX elements aren't "instances" because they don't hold any internal state and aren't real DOM nodes. They're lightweight descriptions, like blueprints. So these two examples, in fact, *are* completely equivalent. [Preserving and Resetting State](/learn/preserving-and-resetting-state) goes into detail about how this works.
+Jika anda berasal dari latar belakang pemrograman berorientasi objek, anda mungkin berasumsi bahwa kedua contoh tersebut sedikit berbeda karena salah satunya dapat membuat dua jenis "instansi" `
- ` berbeda. Tetapi elemen JSX bukan "instansi" karena mereka tidak memiliki *state* internal dan bukan node DOM yang sebenarnya. Itu deskripsi ringan, seperti cetak biru. Jadi kedua contoh ini, sebenarnya, *adalah* benar-benar sama. [Preserving and Resetting State](/learn/preserving-and-resetting-state) menjelaskan lebih detil bagaimana hal ini bekerja.
-Now let's say you want to wrap the completed item's text into another HTML tag, like `` to strike it out. You can add even more newlines and parentheses so that it's easier to nest more JSX in each of the cases:
+Sekarang katakanlah anda ingin membungkus teks `item` yang sudah selesai ke dalam tag HTML lain, seperti `` untuk mencoretnya. Anda bahkan dapat menambahkan lebih banyak baris baru dan tanda kurung sehingga lebih mudah untuk menyarankan lebih banyak JSX di setiap kasus:
@@ -234,7 +234,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-This style works well for simple conditions, but use it in moderation. If your components get messy with too much nested conditional markup, consider extracting child components to clean things up. In React, markup is a part of your code, so you can use tools like variables and functions to tidy up complex expressions.
+Gaya ini bekerja dengan baik untuk kondisi yang sederhana, tetapi gunakan dengan secukupnya. Jika komponen anda berantakan dengan terlalu banyak *markup* bersyarat bersarang (*nested conditional markup*), pertimbangkan untuk mengekstrak komponen turunan untuk membersihkan semuanya. Di React, *markup* adalah bagian dari kode anda, sehingga anda dapat menggunakan alat seperti variabel (`variables`) dan fungsi (`functions`) untuk merapikan ekspresi yang kompleks.
-### Logical AND operator (`&&`) {/*logical-and-operator-*/}
+### Operator Logis AND (`&&`) {/*logical-and-operator-*/}
-Another common shortcut you'll encounter is the [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Inside React components, it often comes up when you want to render some JSX when the condition is true, **or render nothing otherwise.** With `&&`, you could conditionally render the checkmark only if `isPacked` is `true`:
+Pintasan umum lainnya yang akan anda temui adalah [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Di Dalam komponen React, hal tersebut sering muncul ketika anda ingin me-*render* beberapa JSX apabila memiliki kondisi `true`, **atau tidak me-*render* sebaliknya.** Dengan `&&`, anda dapat me-*render* tanda centang secara bersyarat hanya jika `isPacked` adalah `true`:
```js
return (
@@ -270,9 +270,9 @@ return (
);
```
-You can read this as *"if `isPacked`, then (`&&`) render the checkmark, otherwise, render nothing"*.
+Anda dapat membaca ini sebagai *"jika `isPacked`, maka (`&&`) render tanda centang, jika tidak, tidak render apa pun"*.
-Here it is in action:
+Seperti berikut:
@@ -288,7 +288,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
-
Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-A [JavaScript && expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) returns the value of its right side (in our case, the checkmark) if the left side (our condition) is `true`. But if the condition is `false`, the whole expression becomes `false`. React considers `false` as a "hole" in the JSX tree, just like `null` or `undefined`, and doesn't render anything in its place.
+[Ekspresi && JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND) mengembalikan nilai sisi kanannya (dalam kasus ini, tanda centang) jika sisi kirinya (kondisi kita) adalah `true`. Tetapi jika kondisinya adalah `false`, seluruh ekspresi menjadi `false`. React menganggap `false` sebagai sebuah "lubang" pada JSX *tree*, sama seperti `null` atau `undefined`, dan tidak me-*render* apa pun di tempatnya.
-**Don't put numbers on the left side of `&&`.**
+**Jangan menaruh angka di sisi kiri `&&`.**
-To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is `0`, then the whole expression gets that value (`0`), and React will happily render `0` rather than nothing.
+Untuk menguji kondisi tersebut, JavaScript mengubah sisi kiri menjadi sebuah `*boolean*` secara otomatis. Namun, jika sisi kiri adalah `0`, maka seluruh ekspresi akan mendapatkan nilai (`0`) tesebut, dan React akan dengan senang hati me-*render* `0` daripada tidak sama sekali.
-For example, a common mistake is to write code like `messageCount &&
New messages
`. It's easy to assume that it renders nothing when `messageCount` is `0`, but it really renders the `0` itself!
+Sebagai contoh, kesalahan umum yang sering terjadi adalah menulis kode seperti `messageCount && Pesan Baru
`. Sangat mudah untuk berasumsi bahwa itu tidak me-*render*/menghasilkan apa-apa ketika `messageCount` adalah `0`, tapi itu benar-benar me-*render* `0` itu sendiri!
-To fix it, make the left side a boolean: `messageCount > 0 && New messages
`.
+Untuk memperbaikinya, jadikan sisi kiri sebagai `*boolean*`: `messageCount > 0 && Pesan Baru
`.
From 093d0a3b5cc09e9f6ebf17db4ca36e492eccd336 Mon Sep 17 00:00:00 2001
From: Andrian Santo
Date: Wed, 3 May 2023 08:36:32 +0700
Subject: [PATCH 4/5] docs translation: pitfall, conditonally assigning jsx to
a variable, recap, & challenges
---
src/content/learn/conditional-rendering.md | 74 +++++++++++-----------
1 file changed, 37 insertions(+), 37 deletions(-)
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 4a5ee6f48..4df0f1edd 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -104,7 +104,7 @@ Coba melakukan edit apa yang dikembalikan dalam kedua kasus tersebut, dan lihat
Perhatikan bagaimana anda membuat logika bercabang dengan pernyataan `if` dan `return` menggunakan JavaScript. Di React, alur kontrol (seperti kondisi) ditangani oleh JavaScript.
-### Tidak mengembalikan apa pun secara bersyarat dengan `null` {/*conditionally-returning-nothing-with-null*/}
+### Tidak mengembalikan Apa Pun secara Bersyarat dengan `null` {/*conditionally-returning-nothing-with-null*/}
Dalam kondisi tertentu, anda tidak ingin me-*render* apa pun. Sebagai Contoh, katakan anda tidak mau menampilkan `item` yang dikemas. Sebuah komponen harus mengembalikan sesuatu. Dalam kasus ini, anda dapat mengambalikan `null`:
@@ -179,7 +179,7 @@ return - {name}
;
Meskipun duplikasi ini tidak berbahaya, ini dapat membuka kode anda lebih susah untuk di-*maintain*. Bagaimana jika anda ingi mengganti `className`nya? Anda harus melakukannya di dua tempat dalam kode anda! Dalam situasi seperti itu, anda dapat menyertakan sedikit JSX secara bersyarat untuk membuat kode anda lebih [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
-### Operator (`? :`) bersyarat (ternary) {/*conditional-ternary-operator--*/}
+### Operator (`? :`) Bersyarat (ternary) {/*conditional-ternary-operator--*/}
JavaScript memiliki syntax yang ringkas untuk menulis ekspresi bersyarat -- [operator bersyarat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) atau sering disebut sebagai *"ternary operator"*.
@@ -315,25 +315,25 @@ export default function PackingList() {
-**Jangan menaruh angka di sisi kiri `&&`.**
+**Jangan menaruh Angka di sisi kiri `&&`.**
-Untuk menguji kondisi tersebut, JavaScript mengubah sisi kiri menjadi sebuah `*boolean*` secara otomatis. Namun, jika sisi kiri adalah `0`, maka seluruh ekspresi akan mendapatkan nilai (`0`) tesebut, dan React akan dengan senang hati me-*render* `0` daripada tidak sama sekali.
+Untuk menguji kondisi tersebut, JavaScript mengubah sisi kiri menjadi sebuah *`boolean`* secara otomatis. Namun, jika sisi kiri adalah `0`, maka seluruh ekspresi akan mendapatkan nilai (`0`) tesebut, dan React akan dengan senang hati me-*render* `0` daripada tidak sama sekali.
Sebagai contoh, kesalahan umum yang sering terjadi adalah menulis kode seperti `messageCount && Pesan Baru
`. Sangat mudah untuk berasumsi bahwa itu tidak me-*render*/menghasilkan apa-apa ketika `messageCount` adalah `0`, tapi itu benar-benar me-*render* `0` itu sendiri!
-Untuk memperbaikinya, jadikan sisi kiri sebagai `*boolean*`: `messageCount > 0 && Pesan Baru
`.
+Untuk memperbaikinya, jadikan sisi kiri sebagai *`boolean`*: `messageCount > 0 && Pesan Baru
`.
-### Conditionally assigning JSX to a variable {/*conditionally-assigning-jsx-to-a-variable*/}
+### Menugaskan JSX secara Bersyarat ke sebuah Variabel {/*conditionally-assigning-jsx-to-a-variable*/}
-When the shortcuts get in the way of writing plain code, try using an `if` statement and a variable. You can reassign variables defined with [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), so start by providing the default content you want to display, the name:
+Saat pintasan menghalangi dalam penulisan kode biasa, coba gunakan pernyataan `if` dan sebuah variabel. Anda dapat menetapkan ulang variabel yang telah ditentukan dengan menggunakan [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), jadi mulailah dengan menyediakan konten *default* yang ingin anda tampilkan, namanya:
```js
let itemContent = name;
```
-Use an `if` statement to reassign a JSX expression to `itemContent` if `isPacked` is `true`:
+Gunakan pernyataan `if` untuk menetapkan kembali ekspresi JSX ke `itemContent` jika `isPacked` adalah `true`:
```js
if (isPacked) {
@@ -341,7 +341,7 @@ if (isPacked) {
}
```
-[Curly braces open the "window into JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:
+[Kurung kurawal membuka "jendela ke JavaScript".](/learn/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world) Menyematkan variabel dengan kurung kurawal di JSX *tree* yang dikembalikan, menyarangkan ekspresi yang sebelumnya dihitung di dalam JSX:
```js
-
@@ -349,7 +349,7 @@ if (isPacked) {
```
-This style is the most verbose, but it's also the most flexible. Here it is in action:
+Gaya ini paling bertele-tele, tetapi juga yang paling fleksibel. Berikut adalah caranya:
@@ -369,7 +369,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-Like before, this works not only for text, but for arbitrary JSX too:
+Seperti sebelumnya, cara ini bekerja tidak hanya pada teks, tetapi juga pada JSX yang sewenang-wenang:
@@ -437,16 +437,16 @@ export default function PackingList() {
-If you're not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code -- and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.
+Jika anda tidak terbiasa dengan JavaScript, variasi dari gaya ini mungkin tampak berlebihan pada awalnya. Namun, mempelajarinya akan membantu anda dalam membaca dan menulis kode JavaScript apa pun -- dan bukan hanya komponen React! Pilih salah satu yang anda sukai sebagai permulaan, dan lihat kembali referensi ini jika anda lupa cara kerja yang lain.
-* In React, you control branching logic with JavaScript.
-* You can return a JSX expression conditionally with an `if` statement.
-* You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.
-* In JSX, `{cond ? : }` means *"if `cond`, render ``, otherwise ``"*.
-* In JSX, `{cond && }` means *"if `cond`, render ``, otherwise nothing"*.
-* The shortcuts are common, but you don't have to use them if you prefer plain `if`.
+* Di React, anda mengontrol logika percabangan dengan JavaScript.
+* Anda dapat mengembalikan ekspresi JSX secara bersyarat menggunakan pernyataan `if`.
+* Anda dapat menyimpan beberapa JSX ke dalam sebuah variabel secara bersyarat dan kemudian memasukkannya ke dalam JSX yang lain dengan menggunakan kurung kurawal.
+* Di JSX, `{cond ? : }` berarti *"jika `cond`, render ``, jika tidak ``"*.
+* Di JSX, `{cond && }` berarti *"jika `cond`, render ``, jika tidak render apa pun"*.
+* Pintasan itu umum, tapi anda tidak harus menggunakannya jika anda lebih menyukai pernyataan `if`.
@@ -454,9 +454,9 @@ If you're not familiar with JavaScript, this variety of styles might seem overwh
-#### Show an icon for incomplete items with `? :` {/*show-an-icon-for-incomplete-items-with--*/}
+#### Tampilkan ikon untuk item yang tidak lengkap dengan menggunakan `? :` {/*show-an-icon-for-incomplete-items-with--*/}
-Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn’t `true`.
+Gunakan operator bersyarat (`cond ? a : b`) untuk me-*render* sebuah ❌ jika `isPacked` bukan `true`.
@@ -472,7 +472,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
-
Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-
Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-#### Show the item importance with `&&` {/*show-the-item-importance-with-*/}
+#### Tunjukan *importance* item dengan menggunakan `&&` {/*show-the-item-importance-with-*/}
-In this example, each `Item` receives a numerical `importance` prop. Use the `&&` operator to render "_(Importance: X)_" in italics, but only for items that have non-zero importance. Your item list should end up looking like this:
+Dalam contoh ini, setiap `Item` menerima sebuah properti numerik `importance`. Gunakan operator `&&` untuk me-*render* "_(Importance: X)_" dalam *italics*, tapi hanya untuk *items* yang memiliki properti importance bukan nol. Kumpulan *item* anda akan terlihat seperti ini:
* Space suit _(Importance: 9)_
* Helmet with a golden leaf
* Photo of Tam _(Importance: 6)_
-Don't forget to add a space between the two labels!
+Jangan lupa untuk menambahkan spasi di antara kedua label tersebut!
@@ -558,7 +558,7 @@ function Item({ name, importance }) {
export default function PackingList() {
return (
-
Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-This should do the trick:
+Berikut adalah cara penyelesaiannya:
@@ -602,7 +602,7 @@ function Item({ name, importance }) {
export default function PackingList() {
return (
-
Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-Note that you must write `importance > 0 && ...` rather than `importance && ...` so that if the `importance` is `0`, `0` isn't rendered as the result!
+Catat bahwa andar harus menulis `importance > 0 && ...` daripada `importance && ...` sehingga jika `importance` adalah `0`, `0` tidak akan di-*render* sebagai hasilnya!
-In this solution, two separate conditions are used to insert a space between the name and the importance label. Alternatively, you could use a fragment with a leading space: `importance > 0 && <> ...` or add a space immediately inside the ``: `importance > 0 && ...`.
+Dalam solusi ini, dua kondisi berbeda digunakan untuk menambahkan spasi diantara nama dan label *`importance`. Alternatifnya, anda bisa menggunakan *`fragment`* dengan spasi terdepan: `importance > 0 && <> ...` atau menambahkan spasi tepat di dalam ``: `importance > 0 && ...`.
-#### Refactor a series of `? :` to `if` and variables {/*refactor-a-series-of---to-if-and-variables*/}
+#### Lakukan Refactor terhadap serangkaian kondisi `? :` menjadi menggunakan `if` dan variabel {/*refactor-a-series-of---to-if-and-variables*/}
-This `Drink` component uses a series of `? :` conditions to show different information depending on whether the `name` prop is `"tea"` or `"coffee"`. The problem is that the information about each drink is spread across multiple conditions. Refactor this code to use a single `if` statement instead of three `? :` conditions.
+Komponen `Drink` menggunakan serangkaian kondisi `? :` untuk menampilkan informasi berbeda tergantung dari properti `name` bernilai `"tea"` atau `"coffee"`. Masalahnya adalah informasi setiap *`drink`* tersebar di berbagai kondisi. Lakukan *refactor* pada kode ini untuk menggunakan satu pernyataan `if` daripada menggunakan 3 kondisi `? :`.
@@ -665,11 +665,11 @@ export default function DrinkList() {
-Once you've refactored the code to use `if`, do you have further ideas on how to simplify it?
+Setelah anda melakukan *refactor* kode tersebut menggunakan pernyataan `if`, apakah anda memiliki ide lebih lanjut untuk menyederhanakannya?
-There are multiple ways you could go about this, but here is one starting point:
+Ada banyak cara untuk melakukannya, tetapi berikut adalah salah satu titik awal:
@@ -712,9 +712,9 @@ export default function DrinkList() {
-Here the information about each drink is grouped together instead of being spread across multiple conditions. This makes it easier to add more drinks in the future.
+Disini informasi tentang setiap *drink* dikelompokkan bersama, bukannya disebarkan ke berbagai kondisi. Ini membuatnya lebih mudah untuk menambahkan lebih banyak *drinks* di masa mendatang.
-Another solution would be to remove the condition altogether by moving the information into objects:
+Solusi lainnya adalah menghapus kondisi bersamaan dengan memindahkan infomasi ke dalam objek.
From 99c9404f430b7a549fb8fe4ba4c69950390e04b2 Mon Sep 17 00:00:00 2001
From: Andrian Santo
Date: Wed, 3 May 2023 08:51:14 +0700
Subject: [PATCH 5/5] docs translation, wording adjustment, fix typo
---
src/content/learn/conditional-rendering.md | 14 +++++++-------
1 file changed, 7 insertions(+), 7 deletions(-)
diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md
index 4df0f1edd..0ae9bf43f 100644
--- a/src/content/learn/conditional-rendering.md
+++ b/src/content/learn/conditional-rendering.md
@@ -18,7 +18,7 @@ Komponen anda sering diperlukan untuk menampilkan hal yang berbeda tergantung da
## Mengembalikan JSX secara Bersyarat {/*conditionally-returning-jsx*/}
-Katakanlah anda memiliki komponen `PackingList` yang melakukan render pada beberapa `Item`s, yang dapat ditandai secara dikemas atau tidak:
+Katakanlah anda memiliki komponen `PackingList` yang melakukan render pada beberapa `Item`, yang dapat ditandai secara dikemas atau tidak:
@@ -100,7 +100,7 @@ export default function PackingList() {
-Coba melakukan edit apa yang dikembalikan dalam kedua kasus tersebut, dan lihat bagaimana hasilnya berubah!
+Coba melakukan *edit* pada apa yang dikembalikan dalam kedua kasus tersebut, dan lihat bagaimana hasilnya berubah!
Perhatikan bagaimana anda membuat logika bercabang dengan pernyataan `if` dan `return` menggunakan JavaScript. Di React, alur kontrol (seperti kondisi) ditangani oleh JavaScript.
@@ -156,7 +156,7 @@ Dalam praktiknya, mengembalikan `null` dari sebuah komponen itu tidak umum karen
## Secara Bersyarat memasukkan JSX {/*conditionally-including-jsx*/}
-Pada contoh sebelumnya, anda mengontrol JSX *tree* mana (*if any!*) yang akan dikembalikan oleh komponen. Anda mungkin telah memperhatikan beberapa duplikasi dalam hasil *render*:
+Pada contoh sebelumnya, anda mengontrol JSX *tree* mana (if any!) yang akan dikembalikan oleh komponen. Anda mungkin telah memperhatikan beberapa duplikasi dalam hasil *render*:
```js
- {name} ✔
@@ -177,7 +177,7 @@ if (isPacked) {
return - {name}
;
```
-Meskipun duplikasi ini tidak berbahaya, ini dapat membuka kode anda lebih susah untuk di-*maintain*. Bagaimana jika anda ingi mengganti `className`nya? Anda harus melakukannya di dua tempat dalam kode anda! Dalam situasi seperti itu, anda dapat menyertakan sedikit JSX secara bersyarat untuk membuat kode anda lebih [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
+Meskipun duplikasi ini tidak berbahaya, ini dapat membuka kode anda lebih susah untuk di-*maintain*. Bagaimana jika anda ingin mengganti `className`nya? Anda harus melakukannya di dua tempat dalam kode anda! Dalam situasi seperti itu, anda dapat menyertakan sedikit JSX secara bersyarat untuk membuat kode anda lebih [DRY.](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)
### Operator (`? :`) Bersyarat (ternary) {/*conditional-ternary-operator--*/}
@@ -258,7 +258,7 @@ export default function PackingList() {
Gaya ini bekerja dengan baik untuk kondisi yang sederhana, tetapi gunakan dengan secukupnya. Jika komponen anda berantakan dengan terlalu banyak *markup* bersyarat bersarang (*nested conditional markup*), pertimbangkan untuk mengekstrak komponen turunan untuk membersihkan semuanya. Di React, *markup* adalah bagian dari kode anda, sehingga anda dapat menggunakan alat seperti variabel (`variables`) dan fungsi (`functions`) untuk merapikan ekspresi yang kompleks.
-### Operator Logis AND (`&&`) {/*logical-and-operator-*/}
+### Operator Logika `AND` (`&&`) {/*logical-and-operator-*/}
Pintasan umum lainnya yang akan anda temui adalah [JavaScript logical AND (`&&`) operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#:~:text=The%20logical%20AND%20(%20%26%26%20)%20operator,it%20returns%20a%20Boolean%20value.) Di Dalam komponen React, hal tersebut sering muncul ketika anda ingin me-*render* beberapa JSX apabila memiliki kondisi `true`, **atau tidak me-*render* sebaliknya.** Dengan `&&`, anda dapat me-*render* tanda centang secara bersyarat hanya jika `isPacked` adalah `true`:
@@ -415,7 +415,7 @@ function Item({ name, isPacked }) {
export default function PackingList() {
return (
- Sally Ride's Packing List
+ Andrian Ride's Packing List
-
-#### Lakukan Refactor terhadap serangkaian kondisi `? :` menjadi menggunakan `if` dan variabel {/*refactor-a-series-of---to-if-and-variables*/}
+#### Lakukan *refactor* terhadap serangkaian kondisi `? :` menjadi menggunakan `if` dan variabel {/*refactor-a-series-of---to-if-and-variables*/}
Komponen `Drink` menggunakan serangkaian kondisi `? :` untuk menampilkan informasi berbeda tergantung dari properti `name` bernilai `"tea"` atau `"coffee"`. Masalahnya adalah informasi setiap *`drink`* tersebar di berbagai kondisi. Lakukan *refactor* pada kode ini untuk menggunakan satu pernyataan `if` daripada menggunakan 3 kondisi `? :`.