From 29df38952d83d3d16181e52b3eab03b511d04f22 Mon Sep 17 00:00:00 2001
From: annisann <ennoza@student.ub.ac.id>
Date: Thu, 4 May 2023 23:53:28 +0700
Subject: [PATCH 01/11] docs(react-dom-components): intro

---
 src/content/reference/react-dom/components/select.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 93ff56ac5..5b7619619 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,12 +4,12 @@ title: "<select>"
 
 <Intro>
 
-The [built-in browser `<select>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) lets you render a select box with options.
+[Komponen peramban bawaan `<select>`] memungkinkan anda untuk me-*render* sebuah kotak pilih (*select box*) dengan opsi.
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Sebuah opsi</option>
+  <option value="otherOption">Opsi lainnya</option>
 </select>
 ```
 

From f0de6f8b33f4367819068f72bda120a95b35eb4a Mon Sep 17 00:00:00 2001
From: annisann <ennoza@student.ub.ac.id>
Date: Fri, 5 May 2023 02:05:43 +0700
Subject: [PATCH 02/11] docs(react-dom-components): reference

---
 .../reference/react-dom/components/select.md  | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 5b7619619..59dc7409e 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,7 +4,7 @@ title: "<select>"
 
 <Intro>
 
-[Komponen peramban bawaan `<select>`] memungkinkan anda untuk me-*render* sebuah kotak pilih (*select box*) dengan opsi.
+[Komponen peramban (*browser*) bawaan `<select>`] memungkinkan anda untuk me-*render* sebuah kotak pilih (*select box*) dengan opsi.
 
 ```js
 <select>
@@ -19,52 +19,52 @@ title: "<select>"
 
 ---
 
-## Reference {/*reference*/}
+## Referensi {/*reference*/}
 
 ### `<select>` {/*select*/}
 
-To display a select box, render the [built-in browser `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) component.
+Untuk menampilkan kotak pilih (*select box*), *render* komponen [peramban (*browser*) bawaan `<select>`.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
 
 ```js
 <select>
-  <option value="someOption">Some option</option>
-  <option value="otherOption">Other option</option>
+  <option value="someOption">Sebuah opsi</option>
+  <option value="otherOption">Opsi lainnya</option>
 </select>
 ```
 
-[See more examples below.](#usage)
+[Lihat contoh lainnya di bawah ini.](#usage)
 
 #### Props {/*props*/}
 
-`<select>` supports all [common element props.](/reference/react-dom/components/common#props)
+`<select>` mendukung seluruh [*props* elemen umum.](/reference/react-dom/components/common#props)
 
-You can [make a select box controlled](#controlling-a-select-box-with-a-state-variable) by passing a `value` prop:
+Anda dapat [membuat sebuah kotak pilih (*select box*) terkontrol](#controlling-a-select-box-with-a-state-variable) dengan memberikan *prop* `<value>`:
 
-* `value`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Controls which option is selected. Every value string match the `value` of some `<option>` nested inside the `<select>`.
+* `value`: Sebuah *string* (atau senarai (*array*) *string* untuk [`multiple={true}`](#enabling-multiple-selection)). Mengontrol opsi mana yang dipilih. Setiap *string* nilai harus sama dengan nilai `value` dari beberapa `<option>` yang tertanam di dalam `<select>`.
 
-When you pass `value`, you must also pass an `onChange` handler that updates the passed value.
+Ketika Anda memberikan `value`, Anda juga harus memberikan *handler* `onChange` yang memperbarui nilai yang diberi.
 
-If your `<select>` is uncontrolled, you may pass the `defaultValue` prop instead:
+Jika `<select>` Anda tidak terkontrol, Anda dapat memberikan *prop* `defaultValue`:
 
-* `defaultValue`: A string (or an array of strings for [`multiple={true}`](#enabling-multiple-selection)). Specifies [the initially selected option.](#providing-an-initially-selected-option)
+* `defaultValue`: Sebuah *string* (atau senarai (*array*) *string* untuk [`multiple={true}`](#enabling-multiple-selection)). Menentukan [pilihan yang dipilih di awal.](#providing-an-initially-selected-option)
 
-These `<select>` props are relevant both for uncontrolled and controlled select boxes:
+*Props* `<select>` ini relevan baik untuk kotak pilih (*select box*) yang terkontrol maupun tidak terkontrol:
 
-* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
-* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): A boolean. If `true`, React will focus the element on mount.
-* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
-* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
-* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): A string. Specifies the name for this select box that's [submitted with the form.](#reading-the-select-box-value-when-submitting-a-form)
-* `onChange`: An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Required for [controlled select boxes.](#controlling-a-select-box-with-a-state-variable) Fires immediately when the user picks a different option. Behaves like the browser [`input` event.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
-* `onChangeCapture`: A version of `onChange` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires immediately when the value is changed by the user. For historical reasons, in React it is idiomatic to use `onChange` instead which works similarly.
-* `onInputCapture`: A version of `onInput` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): An [`Event` handler](/reference/react-dom/components/common#event-handler) function. Fires if an input fails validation on form submit. Unlike the built-in `invalid` event, the React `onInvalid` event bubbles.
-* `onInvalidCapture`: A version of `onInvalid` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events)
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): A boolean. If `true`, the value must be provided for the form to submit.
-* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): A number. For `multiple={true}` selects, specifies the preferred number of initially visible items.
+* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autocomplete): Sebuah *string*. Menentukan salah satu dari kemungkinan [perilaku *autocomplete*.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
+* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): Sebuah *boolean*. Jika bernilai `true`, React akan fokus pada elemen yang terpasang (*mount*). 
+* `children`: `<select>` menerima komponen [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), dan [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) sebagai anak (*children*). Anda juga dapat memberikan komponen Anda sendiri selama akhirnya salah satu dari komponen yang diizinkan akan di-*render*. Jika Anda memberikan komponen Anda yang pada akhirnya me-*render* *tag* `<option>`, setiap `<option>` yang Anda *render* harus mempunyai nilai `value`.
+* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-disabled): Sebuah *boolean*. Jika bernilai `true`, kotak pilih (*select box*) tidak akan interaktif dan akan tampak redup.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): Sebuah *string*. Menentukan `id` dari `<form>` yang dimiliki oleh kotak pilih (*select box*). Jika tidak diisi, maka Specifies the `id` of the `<form>` this select box belongs to. Jika dihilangkan, maka menjadi formulir induk (*parent form*) terdekat.
+* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): Sebuah *boolean*. Jika bernilai `true`, peramban (*browser*) mengizinkan [pilihan ganda.](#enabling-multiple-selection)
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): Sebuah *string*. Menentukan nama untuk kotak pilih (*select box*) yang [dikirim dengan formulir (*form*).]
+* `onChange`: Sebuah fungsi [`Event` *handler* ](/reference/react-dom/components/common#event-handler). Diperlukan untuk [kotak pilih (*select box*) terkontrol.](#controlling-a-select-box-with-a-state-variable) Terpicu segera ketika pengguna memilih opsi berbeda. Berperilaku seperti [*event* `input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) peramban.
+* `onChangeCapture`:  Sebuah versi dari `onChange` yang terpicu saat [fase penangkapan (*capture phase*).](/learn/responding-to-events#capture-phase-events)
+* [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): Sebuah fungsi [`Event` *handler*.](/reference/react-dom/components/common#event-handler) Terpicu segera saat nilai diubah oleh pengguna. Untuk alasan sejarah, di React lebih umum menggunakan `onChange` yang bekerja dengan cara yang sama.
+* `onInputCapture`: Sebuah versi dari `onInput` yang terpicu pada [fase penangkapan (*capture phase*).](/learn/responding-to-events#capture-phase-events)
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): Sebuah fungsi [`Event` handler.](/reference/react-dom/components/common#event-handler) Terpicu jika masukan gagal divalidasi pada pengiriman formulir (*form submit*). Berbeda dengan event bawaan `invalid`, event React `onInvalid` menyebar.
+* `onInvalidCapture`: Sebuah versi dari `onInvalid` yang terpicu pada  fires in the [fase penangkapan (*capture phase*).](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): Sebuah *boolean*. Jika nilai `true`, nilai harus disediakan untuk formulir (*form*) dikirim.
+* [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): Sebuah angka. Untuk pemilihan (*select*) dengan `multiple={true}`, tentukan jumlah awal *item* terlihat yang diinginkan.
 
 #### Caveats {/*caveats*/}
 

From 474571e31abf087fd816515c1fe68a984dedd28a Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 02:25:22 +0700
Subject: [PATCH 03/11] docs(react-dom-components): caveats in reference

---
 src/content/reference/react-dom/components/select.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 59dc7409e..d41998f98 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -66,13 +66,13 @@ Jika `<select>` Anda tidak terkontrol, Anda dapat memberikan *prop* `defaultValu
 * [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): Sebuah *boolean*. Jika nilai `true`, nilai harus disediakan untuk formulir (*form*) dikirim.
 * [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): Sebuah angka. Untuk pemilihan (*select*) dengan `multiple={true}`, tentukan jumlah awal *item* terlihat yang diinginkan.
 
-#### Caveats {/*caveats*/}
+#### Catatan Penting {/*caveats*/}
 
-- Unlike in HTML, passing a `selected` attribute to `<option>` is not supported. Instead, use [`<select defaultValue>`](#providing-an-initially-selected-option) for uncontrolled select boxes and [`<select value>`](#controlling-a-select-box-with-a-state-variable) for controlled select boxes.
-- If a select box receives a `value` prop, it will be [treated as controlled.](#controlling-a-select-box-with-a-state-variable)
-- A select box can't be both controlled and uncontrolled at the same time.
-- A select box cannot switch between being controlled or uncontrolled over its lifetime.
-- Every controlled select box needs an `onChange` event handler that synchronously updates its backing value.
+- Berbeda dengan HTML, memberikan atribut `selected` pada `option` tidak didukung. Sebagai gantinya, gunakan [`<select defaultValue>`](#providing-an-initially-selected-option) untuk kotak pilih (*selected box*) yang tidak terkontrol dan [`<select value>`](#controlling-a-select-box-with-a-state-variable) untuk kotak pilih (*selected box*) yang terkontrol.
+- Jika kotak pilih (*select box*) meneripa *prop* value, maka *prop* tersebut akan [diperlakukan sebagai terkontrol.](#controlling-a-select-box-with-a-state-variable)
+- Sebuah kotak pilih (*select box*) tidak dapat menjadi terkontrol dan tidak terkontrol pada waktu yang sama.
+- Sebuah kotak pilih (*select box*) tidak dapat berganti menjadi terkontrol atau tidak terkontrol selama masa hidupnya.
+- Setiap kotak pilih (*select box*) terkontrol membutuhkan *event handler* `onChange` yang secara sinkron memperbarui nilai yang ada di belakangnya.
 
 ---
 

From d344ff2bffa59ace856fb4144b24404ea3723a05 Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 19:04:19 +0700
Subject: [PATCH 04/11] docs(react-dom-components): usage 1 of 6. (#427)

---
 .../reference/react-dom/components/select.md       | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index d41998f98..80c9ce153 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -76,11 +76,11 @@ Jika `<select>` Anda tidak terkontrol, Anda dapat memberikan *prop* `defaultValu
 
 ---
 
-## Usage {/*usage*/}
+## Penggunaan {/*usage*/}
 
-### Displaying a select box with options {/*displaying-a-select-box-with-options*/}
+### Menampilkan kotak pilih (select box) dengan opsi {/*displaying-a-select-box-with-options*/}
 
-Render a `<select>` with a list of `<option>` components inside to display a select box. Give each `<option>` a `value` representing the data to be submitted with the form.
+*Render* `<select>` dengan daftar komponen `<option>` di dalamnya untuk menampilkan sebuah kotak pilih (*select box*). Beri setiap `<opsi>` sebuah `nilai` yang mewakili data yang akan dikirimkan bersama formulir (*form*).
 
 <Sandpack>
 
@@ -88,11 +88,11 @@ Render a `<select>` with a list of `<option>` components inside to display a sel
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Pilih buah
       <select name="selectedFruit">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Apel</option>
+        <option value="banana">Pisang</option>
+        <option value="orange">Jeruk</option>
       </select>
     </label>
   );

From 9ca39d85b0eead6f3ff53e0f2daca2c5b00b0752 Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 19:25:40 +0700
Subject: [PATCH 05/11] docs(react-dom-components): usage 2 of 6. (#427)

---
 .../reference/react-dom/components/select.md  | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 80c9ce153..fe4378ef3 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -107,11 +107,11 @@ select { margin: 5px; }
 
 ---
 
-### Providing a label for a select box {/*providing-a-label-for-a-select-box*/}
+### Memberikan label untuk kotak pilih (select box) {/*providing-a-label-for-a-select-box*/}
 
-Typically, you will place every `<select>` inside a [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) tag. This tells the browser that this label is associated with that select box. When the user clicks the label, the browser will automatically focus the select box. It's also essential for accessibility: a screen reader will announce the label caption when the user focuses the select box.
+Biasanya, Anda akan menempatkan setiap `<select>` di dalam *tag* [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label). Ini memberi tahu peramban (*browser*) bahwa label ini dikaitkan dengan kotak pilih (*select box*) tersebut. Saat pengguna mengeklik labelnya, peramban (*browser*) secara otomatis akan memfokuskan kotak pilih (*select box*). Hal ini juga penting untuk aksesibilitas: pembaca layar (*screen reader*) akan membacakan keterangan label saat pengguna memfokuskan kotak pilih (*select box*).
 
-If you can't nest `<select>` into a `<label>`, associate them by passing the same ID to `<select id>` and [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) To avoid conflicts between multiple instances of one component, generate such an ID with [`useId`.](/reference/react/useId)
+Jika Anda tidak dapat menumpuk `<select>` ke dalam `<label>`, kaitkan keduanya dengan meneruskan ID yang sama ke `<select id>` dan [`<label htmlFor>`.](https://developer. mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Untuk menghindari konflik antara beberapa instans (*instance*) dari satu komponen, buat ID tersebut dengan [`useId`.](/reference/react/useId)
 
 <Sandpack>
 
@@ -123,21 +123,21 @@ export default function Form() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Pilih buah:
         <select name="selectedFruit">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Apel</option>
+          <option value="banana">Pisang</option>
+          <option value="orange">Jeruk</option>
         </select>
       </label>
       <hr />
       <label htmlFor={vegetableSelectId}>
-        Pick a vegetable:
+        Pilih sayuran:
       </label>
       <select id={vegetableSelectId} name="selectedVegetable">
-        <option value="cucumber">Cucumber</option>
-        <option value="corn">Corn</option>
-        <option value="tomato">Tomato</option>
+        <option value="cucumber">Timun</option>
+        <option value="corn">Jagung</option>
+        <option value="tomato">Tomat</option>
       </select>
     </>
   );
@@ -165,9 +165,9 @@ export default function FruitPicker() {
     <label>
       Pick a fruit:
       <select name="selectedFruit" defaultValue="orange">
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Apel</option>
+        <option value="banana">Pisang</option>
+        <option value="orange">Jeruk</option>
       </select>
     </label>
   );
@@ -204,9 +204,9 @@ export default function FruitPicker() {
         defaultValue={['orange', 'banana']}
         multiple={true}
       >
-        <option value="apple">Apple</option>
-        <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="apple">Apel</option>
+        <option value="banana">Pisang</option>
+        <option value="orange">Jeruk</option>
       </select>
     </label>
   );
@@ -250,9 +250,9 @@ export default function EditPost() {
       <label>
         Pick your favorite fruit:
         <select name="selectedFruit" defaultValue="orange">
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Apel</option>
+          <option value="banana">Pisang</option>
+          <option value="orange">Jeruk</option>
         </select>
       </label>
       <label>
@@ -262,9 +262,9 @@ export default function EditPost() {
           multiple={true}
           defaultValue={['corn', 'tomato']}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Timun</option>
+          <option value="corn">Jagung</option>
+          <option value="tomato">Tomat</option>
         </select>
       </label>
       <hr />
@@ -313,9 +313,9 @@ function FruitPicker() {
       value={selectedFruit} // ...force the select's value to match the state variable...
       onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
     >
-      <option value="apple">Apple</option>
-      <option value="banana">Banana</option>
-      <option value="orange">Orange</option>
+      <option value="apple">Apel</option>
+      <option value="banana">Pisang</option>
+      <option value="orange">Jeruk</option>
     </select>
   );
 }
@@ -339,9 +339,9 @@ export default function FruitPicker() {
           value={selectedFruit}
           onChange={e => setSelectedFruit(e.target.value)}
         >
-          <option value="apple">Apple</option>
-          <option value="banana">Banana</option>
-          <option value="orange">Orange</option>
+          <option value="apple">Apel</option>
+          <option value="banana">Pisang</option>
+          <option value="orange">Jeruk</option>
         </select>
       </label>
       <hr />
@@ -356,9 +356,9 @@ export default function FruitPicker() {
             setSelectedVegs(values);
           }}
         >
-          <option value="cucumber">Cucumber</option>
-          <option value="corn">Corn</option>
-          <option value="tomato">Tomato</option>
+          <option value="cucumber">Timun</option>
+          <option value="corn">Jagung</option>
+          <option value="tomato">Tomat</option>
         </select>
       </label>
       <hr />

From 624000b6ba3873d156d882be343a20c1c1af450a Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 19:31:00 +0700
Subject: [PATCH 06/11] docs(react-dom-components): usage 3 of 6. (#427)

---
 src/content/reference/react-dom/components/select.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index fe4378ef3..4a53f9502 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -153,9 +153,9 @@ select { margin: 5px; }
 
 ---
 
-### Providing an initially selected option {/*providing-an-initially-selected-option*/}
+### Memberikan opsi awal yang dipilih {/*providing-an-initially-selected-option*/}
 
-By default, the browser will select the first `<option>` in the list. To select a different option by default, pass that `<option>`'s `value` as the `defaultValue` to the `<select>` element.
+Secara bawaan, peramban (*browser*) akan memilih `<opsi>` pertama dalam daftar. Untuk memilih opsi yang berbeda secara default, teruskan nilai `value` dari `<option>` tersebut sebagai `defaultValue` ke elemen `<select>`.
 
 <Sandpack>
 
@@ -163,7 +163,7 @@ By default, the browser will select the first `<option>` in the list. To select
 export default function FruitPicker() {
   return (
     <label>
-      Pick a fruit:
+      Pilih buah:
       <select name="selectedFruit" defaultValue="orange">
         <option value="apple">Apel</option>
         <option value="banana">Pisang</option>
@@ -182,7 +182,7 @@ select { margin: 5px; }
 
 <Pitfall>
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Tidak seperti di HTML, meneruskan atribut `selected` ke `<option>` individual tidak didukung.
 
 </Pitfall>
 
@@ -334,7 +334,7 @@ export default function FruitPicker() {
   return (
     <>
       <label>
-        Pick a fruit:
+        Pilih buah:
         <select
           value={selectedFruit}
           onChange={e => setSelectedFruit(e.target.value)}

From 0c5d9e46a362027eb0e29390bd3d67fa0efd121a Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 19:48:26 +0700
Subject: [PATCH 07/11] docs(react-dom-components): usage 4 of 6. (#427)

---
 src/content/reference/react-dom/components/select.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 4a53f9502..9b96acaa0 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -188,9 +188,9 @@ Tidak seperti di HTML, meneruskan atribut `selected` ke `<option>` individual ti
 
 ---
 
-### Enabling multiple selection {/*enabling-multiple-selection*/}
+### Mengaktifkan banyak pilihan {/*enabling-multiple-selection*/}
 
-Pass `multiple={true}` to the `<select>` to let the user select multiple options. In that case, if you also specify `defaultValue` to choose the initially selected options, it must be an array.
+Berikan `multiple={true}` ke `<select>` agar pengguna dapat memilih beberapa opsi. Dalam hal ini, jika Anda juga menentukan `defaultValue` untuk menentukan opsi awal yang dipilih, maka harus dalam bentuk senarai (*array*).
 
 <Sandpack>
 
@@ -198,7 +198,7 @@ Pass `multiple={true}` to the `<select>` to let the user select multiple options
 export default function FruitPicker() {
   return (
     <label>
-      Pick some fruits:
+      Pilih beberapa buah:
       <select
         name="selectedFruit"
         defaultValue={['orange', 'banana']}

From f8d6979f2ab8ad41e015a22e5c474693e8463936 Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 20:08:21 +0700
Subject: [PATCH 08/11] docs(react-dom-components): usage 5 of 6. (#427)

---
 .../reference/react-dom/components/select.md  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 9b96acaa0..d448f9045 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -221,34 +221,34 @@ select { display: block; margin-top: 10px; width: 200px; }
 
 ---
 
-### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
+### Membaca nilai kotak pilih saat mengirimkan formulir {/*reading-the-select-box-value-when-submitting-a-form*/}
 
-Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your select box with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. Read the form data with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+Tambahkan [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) di sekitar kotak pilih (*select box*) Anda dengan [`<button type="submit"> `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) di dalamnya. Ini akan memanggil *event handler* `<form onSubmit>` Anda. Secara bawaan, peramban (*browser*) akan mengirimkan data formulir (*form data*) ke URL yang sedang digunakan dan menyegarkan (*refresh*) halaman. Anda dapat menimpa perilaku tersebut dengan memanggil `e.preventDefault()`. Baca data formulir (*form data*) dengan [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
 <Sandpack>
 
 ```js
 export default function EditPost() {
   function handleSubmit(e) {
-    // Prevent the browser from reloading the page
+    // Mencegah peramban (browser) memuat ulang halaman
     e.preventDefault();
-    // Read the form data
+    // Baca data formulir (form data)
     const form = e.target;
     const formData = new FormData(form);
-    // You can pass formData as a fetch body directly:
+    // Anda dapat meneruskan formData sebagai badan pengambilan (fetch body) secara langsung:
     fetch('/some-api', { method: form.method, body: formData });
-    // You can generate a URL out of it, as the browser does by default:
+    // Anda dapat membuat URL darinya, seperti yang dilakukan peramban (browser) secara bawaan:
     console.log(new URLSearchParams(formData).toString());
-    // You can work with it as a plain object.
+    // Anda dapat menggunakannya sebagai objek biasa.
     const formJson = Object.fromEntries(formData.entries());
-    console.log(formJson); // (!) This doesn't include multiple select values
-    // Or you can get an array of name-value pairs.
+    console.log(formJson); // (!) Tidak termasuk beberapa nilai pilihan
+    // Atau Anda bisa mendapatkan senarai (array) pasangan nama-nilai.
     console.log([...formData.entries()]);
   }
 
   return (
     <form method="post" onSubmit={handleSubmit}>
       <label>
-        Pick your favorite fruit:
+        Pilih buah kesukaan Anda:
         <select name="selectedFruit" defaultValue="orange">
           <option value="apple">Apel</option>
           <option value="banana">Pisang</option>
@@ -256,7 +256,7 @@ export default function EditPost() {
         </select>
       </label>
       <label>
-        Pick all your favorite vegetables:
+        Pilih semua sayur kesukaan Anda:
         <select
           name="selectedVegetables"
           multiple={true}
@@ -269,7 +269,7 @@ export default function EditPost() {
       </label>
       <hr />
       <button type="reset">Reset</button>
-      <button type="submit">Submit</button>
+      <button type="submit">Kirim</button>
     </form>
   );
 }
@@ -284,15 +284,15 @@ label { margin-bottom: 20px; }
 
 <Note>
 
-Give a `name` to your `<select>`, for example `<select name="selectedFruit" />`. The `name` you specified will be used as a key in the form data, for example `{ selectedFruit: "orange" }`.
+Berikan nilai `name` ke `<select>` Anda, misalnya `<select name="selectedFruit" />`. `name` yang Anda tentukan akan digunakan sebagai kunci dalam data formulir (*form data*), misalnya `{ selectedFruit: "orange" }`.
 
-If you use `<select multiple={true}>`, the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) you'll read from the form will include each selected value as a separate name-value pair. Look closely at the console logs in the example above.
+Jika Anda menggunakan `<select multiple={true}>`, [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) yang akan Anda baca dari formulir (*form*) akan menyertakan setiap nilai yang dipilih sebagai pasangan nama-nilai yang terpisah. Perhatikan baik-baik log konsol pada contoh di atas.
 
 </Note>
 
 <Pitfall>
 
-By default, *any* `<button>` inside a `<form>` will submit it. This can be surprising! If you have your own custom `Button` React component, consider returning [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) instead of `<button>`. Then, to be explicit, use `<button type="submit">` for buttons that *are* supposed to submit the form.
+Secara default, *setiap* `<button>` di dalam `<form>` akan mengirimkannya. Hal ini dapat mengejutkan! Jika Anda memiliki komponen React `Button` khusus Anda sendiri, pertimbangkan untuk mengembalikan [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input /button) bukan `<button>`. Kemudian, secara eksplisit, gunakan `<button type="submit">` untuk tombol yang *seharusnya* mengirimkan formulir (*form*).
 
 </Pitfall>
 

From 40fdc2ce20475aadf447df510b927f528da1f28f Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 20:58:25 +0700
Subject: [PATCH 09/11] docs(react-dom-components): usage 6 of 6. (#427)

---
 .../reference/react-dom/components/select.md  | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index d448f9045..4431c45ce 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -292,26 +292,26 @@ Jika Anda menggunakan `<select multiple={true}>`, [`FormData`](https://developer
 
 <Pitfall>
 
-Secara default, *setiap* `<button>` di dalam `<form>` akan mengirimkannya. Hal ini dapat mengejutkan! Jika Anda memiliki komponen React `Button` khusus Anda sendiri, pertimbangkan untuk mengembalikan [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input /button) bukan `<button>`. Kemudian, secara eksplisit, gunakan `<button type="submit">` untuk tombol yang *seharusnya* mengirimkan formulir (*form*).
+Secara bawaan, *setiap* `<button>` di dalam `<form>` akan mengirimkannya. Hal ini dapat mengejutkan! Jika Anda memiliki komponen React `Button` kustom Anda sendiri, pertimbangkan untuk mengembalikan [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input /button) bukan `<button>`. Kemudian, secara eksplisit, gunakan `<button type="submit">` untuk tombol yang *seharusnya* mengirimkan formulir (*form*).
 
 </Pitfall>
 
 ---
 
-### Controlling a select box with a state variable {/*controlling-a-select-box-with-a-state-variable*/}
+### Mengontrol kotak pilih (select box) dengan variabel status {/*controlling-a-select-box-with-a-state-variable*/}
 
-A select box like `<select />` is *uncontrolled.* Even if you [pass an initially selected value](#providing-an-initially-selected-option) like `<select defaultValue="orange" />`, your JSX only specifies the initial value, not the value right now.
+Kotak pilih (*select box*) seperti `<select/>` *tidak terkontrol*. Bahkan jika Anda [memberikan nilai awal yang terpilih](#providing-an-initially-selected-option) seperti `<select defaultValue="orange">`, JSX Anda hanya menentukan nilai awal, bukan nilai saat ini.
 
-**To render a _controlled_ select box, pass the `value` prop to it.** React will force the select box to always have the `value` you passed. Typically, you will control a select box by declaring a [state variable:](/reference/react/useState)
+**Untuk me-*render* kotak pilih _controlled_, berikan *prop* `value` padanya.** React akan memaksa kotak pilih (*select box*) untuk selalu mempunyai nilai `value` yang Anda berikan. Biasanya, Anda akan mengrontrol kotak pilih (*select box*) dengan mendeklarasikan [variabel *state*:](/reference/react/useState)
 
 ```js {2,6,7}
 function FruitPicker() {
-  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
+  const [selectedFruit, setSelectedFruit] = useState('orange'); // Deklarasikan variabel state...
   // ...
   return (
     <select
-      value={selectedFruit} // ...force the select's value to match the state variable...
-      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
+      value={selectedFruit} // ...memaksa nilai select agar cocok dengan variabel state...
+      onChange={e => setSelectedFruit(e.target.value)} // ... dan memperbarui variabel state pada setiap perubahan!
     >
       <option value="apple">Apel</option>
       <option value="banana">Pisang</option>
@@ -321,7 +321,7 @@ function FruitPicker() {
 }
 ```
 
-This is useful if you want to re-render some part of the UI in response to every selection.
+Hal ini berguna jika Anda ingin me-*render* ulang beberapa bagian UI sebagai respons terhadap setiap pilihan.
 
 <Sandpack>
 
@@ -346,7 +346,7 @@ export default function FruitPicker() {
       </label>
       <hr />
       <label>
-        Pick all your favorite vegetables:
+        Pilih semua sayur kesukaan Anda:
         <select
           multiple={true}
           value={selectedVegs}
@@ -362,8 +362,8 @@ export default function FruitPicker() {
         </select>
       </label>
       <hr />
-      <p>Your favorite fruit: {selectedFruit}</p>
-      <p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
+      <p>Buah kesukaan Anda: {selectedFruit}</p>
+      <p>Sayur kesukaan Anda: {selectedVegs.join(', ')}</p>
     </>
   );
 }
@@ -377,8 +377,8 @@ select { margin-bottom: 10px; display: block; }
 
 <Pitfall>
 
-**If you pass `value` without `onChange`, it will be impossible to select an option.** When you control a select box by passing some `value` to it, you *force* it to always have the value you passed. So if you pass a state variable as a `value` but forget to update that state variable synchronously during the `onChange` event handler, React will revert the select box after every keystroke back to the `value` that you specified.
+**Jika Anda memberikan nilai `value` tanpa `onChange`, maka tidak akan mungkin untuk memilih opsi.**. Ketika Anda mengontrol sebuah kotak pilih (*select box*) dengan memberikan sebuah nilai `value`, Anda *memaksa* kotak tersebut untuk selalu memiliki nilai yang Anda berikan. Jadi, jika Anda memberikan variabel *state* sebagai nilai dari `value` tetapi lupa memperbarui variabel *state* secara sinkron selama *event handler* `onChange`, React akan mengembalikan kotak pilih (*select box*) ke nilai `value` yang Anda tentukan setelah setiap penekanan tombol
 
-Unlike in HTML, passing a `selected` attribute to an individual `<option>` is not supported.
+Berbeda dengan HTML, memberikan atribut selected ke <option> individual tidak didukung.
 
 </Pitfall>

From 237b0f96560e4fd3dbd257132ac062f7aa84e366 Mon Sep 17 00:00:00 2001
From: annisann <hello.annisann@gmail.com>
Date: Fri, 5 May 2023 21:30:22 +0700
Subject: [PATCH 10/11] docs(fix): fix typos, awkward translations, etc.

---
 .../reference/react-dom/components/select.md  | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 4431c45ce..532160264 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,7 +4,7 @@ title: "<select>"
 
 <Intro>
 
-[Komponen peramban (*browser*) bawaan `<select>`] memungkinkan anda untuk me-*render* sebuah kotak pilih (*select box*) dengan opsi.
+[Komponen peramban (*browser*) bawaan `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)  memungkinkan anda untuk me-*render* sebuah kotak pilih (*select box*) dengan opsi.
 
 ```js
 <select>
@@ -54,22 +54,22 @@ Jika `<select>` Anda tidak terkontrol, Anda dapat memberikan *prop* `defaultValu
 * [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-autofocus): Sebuah *boolean*. Jika bernilai `true`, React akan fokus pada elemen yang terpasang (*mount*). 
 * `children`: `<select>` menerima komponen [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), dan [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) sebagai anak (*children*). Anda juga dapat memberikan komponen Anda sendiri selama akhirnya salah satu dari komponen yang diizinkan akan di-*render*. Jika Anda memberikan komponen Anda yang pada akhirnya me-*render* *tag* `<option>`, setiap `<option>` yang Anda *render* harus mempunyai nilai `value`.
 * [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-disabled): Sebuah *boolean*. Jika bernilai `true`, kotak pilih (*select box*) tidak akan interaktif dan akan tampak redup.
-* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): Sebuah *string*. Menentukan `id` dari `<form>` yang dimiliki oleh kotak pilih (*select box*). Jika tidak diisi, maka Specifies the `id` of the `<form>` this select box belongs to. Jika dihilangkan, maka menjadi formulir induk (*parent form*) terdekat.
+* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-form): Sebuah *string*. Menentukan `id` dari `<form>` yang dimiliki oleh kotak pilih (*select box*). Jika tidak diisi, maka menjadi formulir induk (*parent form*) terdekat.
 * [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple): Sebuah *boolean*. Jika bernilai `true`, peramban (*browser*) mengizinkan [pilihan ganda.](#enabling-multiple-selection)
-* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): Sebuah *string*. Menentukan nama untuk kotak pilih (*select box*) yang [dikirim dengan formulir (*form*).]
-* `onChange`: Sebuah fungsi [`Event` *handler* ](/reference/react-dom/components/common#event-handler). Diperlukan untuk [kotak pilih (*select box*) terkontrol.](#controlling-a-select-box-with-a-state-variable) Terpicu segera ketika pengguna memilih opsi berbeda. Berperilaku seperti [*event* `input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) peramban.
+* [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-name): Sebuah *string*. Menentukan nama untuk kotak pilih (*select box*) yang [dikirim dengan formulir (*form*).](#reading-the-select-box-value-when-submitting-a-form)
+* `onChange`: Sebuah fungsi [`Event` *handler* ](/reference/react-dom/components/common#event-handler). Diperlukan untuk [kotak pilih (*select box*) terkontrol.](#controlling-a-select-box-with-a-state-variable) Terpicu segera ketika pengguna memilih opsi berbeda. Berperilaku seperti [*event* `input`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) pada peramban.
 * `onChangeCapture`:  Sebuah versi dari `onChange` yang terpicu saat [fase penangkapan (*capture phase*).](/learn/responding-to-events#capture-phase-events)
 * [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event): Sebuah fungsi [`Event` *handler*.](/reference/react-dom/components/common#event-handler) Terpicu segera saat nilai diubah oleh pengguna. Untuk alasan sejarah, di React lebih umum menggunakan `onChange` yang bekerja dengan cara yang sama.
 * `onInputCapture`: Sebuah versi dari `onInput` yang terpicu pada [fase penangkapan (*capture phase*).](/learn/responding-to-events#capture-phase-events)
-* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): Sebuah fungsi [`Event` handler.](/reference/react-dom/components/common#event-handler) Terpicu jika masukan gagal divalidasi pada pengiriman formulir (*form submit*). Berbeda dengan event bawaan `invalid`, event React `onInvalid` menyebar.
-* `onInvalidCapture`: Sebuah versi dari `onInvalid` yang terpicu pada  fires in the [fase penangkapan (*capture phase*).](/learn/responding-to-events#capture-phase-events)
-* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): Sebuah *boolean*. Jika nilai `true`, nilai harus disediakan untuk formulir (*form*) dikirim.
+* [`onInvalid`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event): Sebuah fungsi [`Event` handler.](/reference/react-dom/components/common#event-handler) Terpicu jika masukan gagal divalidasi pada pengiriman formulir (*form submit*). Berbeda dengan *event* bawaan `invalid`, *event* React `onInvalid` menyebar.
+* `onInvalidCapture`: Sebuah versi dari `onInvalid` yang terpicu pada [fase penangkapan (*capture phase*).](/learn/responding-to-events#capture-phase-events)
+* [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required): Sebuah *boolean*. Jika nilai `true`, nilai harus diisi untuk formulir (*form*) dapat dikirim.
 * [`size`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size): Sebuah angka. Untuk pemilihan (*select*) dengan `multiple={true}`, tentukan jumlah awal *item* terlihat yang diinginkan.
 
 #### Catatan Penting {/*caveats*/}
 
 - Berbeda dengan HTML, memberikan atribut `selected` pada `option` tidak didukung. Sebagai gantinya, gunakan [`<select defaultValue>`](#providing-an-initially-selected-option) untuk kotak pilih (*selected box*) yang tidak terkontrol dan [`<select value>`](#controlling-a-select-box-with-a-state-variable) untuk kotak pilih (*selected box*) yang terkontrol.
-- Jika kotak pilih (*select box*) meneripa *prop* value, maka *prop* tersebut akan [diperlakukan sebagai terkontrol.](#controlling-a-select-box-with-a-state-variable)
+- Jika kotak pilih (*select box*) menerima *prop* value, maka *prop* tersebut akan [diperlakukan sebagai terkontrol.](#controlling-a-select-box-with-a-state-variable)
 - Sebuah kotak pilih (*select box*) tidak dapat menjadi terkontrol dan tidak terkontrol pada waktu yang sama.
 - Sebuah kotak pilih (*select box*) tidak dapat berganti menjadi terkontrol atau tidak terkontrol selama masa hidupnya.
 - Setiap kotak pilih (*select box*) terkontrol membutuhkan *event handler* `onChange` yang secara sinkron memperbarui nilai yang ada di belakangnya.
@@ -80,7 +80,7 @@ Jika `<select>` Anda tidak terkontrol, Anda dapat memberikan *prop* `defaultValu
 
 ### Menampilkan kotak pilih (select box) dengan opsi {/*displaying-a-select-box-with-options*/}
 
-*Render* `<select>` dengan daftar komponen `<option>` di dalamnya untuk menampilkan sebuah kotak pilih (*select box*). Beri setiap `<opsi>` sebuah `nilai` yang mewakili data yang akan dikirimkan bersama formulir (*form*).
+*Render* `<select>` dengan daftar komponen `<option>` di dalamnya untuk menampilkan sebuah kotak pilih (*select box*). Beri setiap `<opsi>` sebuah `value` yang mewakili data yang akan dikirimkan bersama formulir (*form*).
 
 <Sandpack>
 
@@ -111,7 +111,7 @@ select { margin: 5px; }
 
 Biasanya, Anda akan menempatkan setiap `<select>` di dalam *tag* [`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label). Ini memberi tahu peramban (*browser*) bahwa label ini dikaitkan dengan kotak pilih (*select box*) tersebut. Saat pengguna mengeklik labelnya, peramban (*browser*) secara otomatis akan memfokuskan kotak pilih (*select box*). Hal ini juga penting untuk aksesibilitas: pembaca layar (*screen reader*) akan membacakan keterangan label saat pengguna memfokuskan kotak pilih (*select box*).
 
-Jika Anda tidak dapat menumpuk `<select>` ke dalam `<label>`, kaitkan keduanya dengan meneruskan ID yang sama ke `<select id>` dan [`<label htmlFor>`.](https://developer. mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Untuk menghindari konflik antara beberapa instans (*instance*) dari satu komponen, buat ID tersebut dengan [`useId`.](/reference/react/useId)
+Jika Anda tidak dapat menumpuk `<select>` ke dalam `<label>`, kaitkan keduanya dengan meneruskan ID yang sama ke `<select id>` dan [`<label htmlFor>`.](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) Untuk menghindari konflik antara beberapa instans (*instance*) dari satu komponen, buat ID tersebut dengan [`useId`.](/reference/react/useId)
 
 <Sandpack>
 
@@ -223,7 +223,7 @@ select { display: block; margin-top: 10px; width: 200px; }
 
 ### Membaca nilai kotak pilih saat mengirimkan formulir {/*reading-the-select-box-value-when-submitting-a-form*/}
 
-Tambahkan [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) di sekitar kotak pilih (*select box*) Anda dengan [`<button type="submit"> `](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) di dalamnya. Ini akan memanggil *event handler* `<form onSubmit>` Anda. Secara bawaan, peramban (*browser*) akan mengirimkan data formulir (*form data*) ke URL yang sedang digunakan dan menyegarkan (*refresh*) halaman. Anda dapat menimpa perilaku tersebut dengan memanggil `e.preventDefault()`. Baca data formulir (*form data*) dengan [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
+Tambahkan [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) di sekitar kotak pilih (*select box*) Anda dengan [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) di dalamnya. Ini akan memanggil *event handler* `<form onSubmit>` Anda. Secara bawaan, peramban (*browser*) akan mengirimkan data formulir (*form data*) ke URL yang sedang digunakan dan menyegarkan (*refresh*) halaman. Anda dapat menimpa perilaku tersebut dengan memanggil `e.preventDefault()`. Baca data formulir (*form data*) dengan [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
 <Sandpack>
 
 ```js
@@ -292,17 +292,17 @@ Jika Anda menggunakan `<select multiple={true}>`, [`FormData`](https://developer
 
 <Pitfall>
 
-Secara bawaan, *setiap* `<button>` di dalam `<form>` akan mengirimkannya. Hal ini dapat mengejutkan! Jika Anda memiliki komponen React `Button` kustom Anda sendiri, pertimbangkan untuk mengembalikan [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input /button) bukan `<button>`. Kemudian, secara eksplisit, gunakan `<button type="submit">` untuk tombol yang *seharusnya* mengirimkan formulir (*form*).
+Secara bawaan, *setiap* `<button>` di dalam `<form>` akan mengirimkannya. Hal ini dapat mengejutkan! Jika Anda memiliki komponen React `Button` kustom, pertimbangkan untuk mengembalikan [`<button type="button">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) bukan `<button>`. Kemudian, secara eksplisit, gunakan `<button type="submit">` untuk tombol yang *seharusnya* mengirimkan formulir (*form*).
 
 </Pitfall>
 
 ---
 
-### Mengontrol kotak pilih (select box) dengan variabel status {/*controlling-a-select-box-with-a-state-variable*/}
+### Mengontrol kotak pilih (select box) dengan variabel state {/*controlling-a-select-box-with-a-state-variable*/}
 
-Kotak pilih (*select box*) seperti `<select/>` *tidak terkontrol*. Bahkan jika Anda [memberikan nilai awal yang terpilih](#providing-an-initially-selected-option) seperti `<select defaultValue="orange">`, JSX Anda hanya menentukan nilai awal, bukan nilai saat ini.
+Kotak pilih (*select box*) seperti `<select/>` *tidak terkontrol*. Bahkan jika Anda [nilai pilihan awal](#providing-an-initially-selected-option) seperti `<select defaultValue="orange">`, JSX Anda hanya menentukan nilai awal, bukan nilai saat ini.
 
-**Untuk me-*render* kotak pilih _controlled_, berikan *prop* `value` padanya.** React akan memaksa kotak pilih (*select box*) untuk selalu mempunyai nilai `value` yang Anda berikan. Biasanya, Anda akan mengrontrol kotak pilih (*select box*) dengan mendeklarasikan [variabel *state*:](/reference/react/useState)
+**Untuk me-*render* kotak pilih (*select box*) _controlled_, berikan *prop* `value` padanya.** React akan memaksa kotak pilih (*select box*) untuk selalu mempunyai nilai `value` yang Anda berikan. Biasanya, Anda akan mengrontrol kotak pilih (*select box*) dengan mendeklarasikan [variabel *state*:](/reference/react/useState)
 
 ```js {2,6,7}
 function FruitPicker() {
@@ -377,8 +377,8 @@ select { margin-bottom: 10px; display: block; }
 
 <Pitfall>
 
-**Jika Anda memberikan nilai `value` tanpa `onChange`, maka tidak akan mungkin untuk memilih opsi.**. Ketika Anda mengontrol sebuah kotak pilih (*select box*) dengan memberikan sebuah nilai `value`, Anda *memaksa* kotak tersebut untuk selalu memiliki nilai yang Anda berikan. Jadi, jika Anda memberikan variabel *state* sebagai nilai dari `value` tetapi lupa memperbarui variabel *state* secara sinkron selama *event handler* `onChange`, React akan mengembalikan kotak pilih (*select box*) ke nilai `value` yang Anda tentukan setelah setiap penekanan tombol
+**Jika Anda memberikan nilai `value` tanpa `onChange`, maka tidak akan mungkin untuk memilih opsi.** Ketika Anda mengontrol sebuah kotak pilih (*select box*) dengan memberikan sebuah nilai `value`, Anda *memaksa* kotak tersebut untuk selalu memiliki nilai yang Anda berikan. Jadi, jika Anda memberikan variabel *state* sebagai nilai dari `value` tetapi lupa memperbarui variabel *state* secara sinkron selama *event handler* `onChange`, React akan mengembalikan kotak pilih (*select box*) ke nilai `value` yang Anda tentukan setelah setiap penekanan tombol.
 
-Berbeda dengan HTML, memberikan atribut selected ke <option> individual tidak didukung.
+Berbeda dengan HTML, memberikan atribut selected ke `<option>` individual tidak didukung.
 
 </Pitfall>

From a7a20f930a4e413f1f5dcd838c89c80de5ff0f14 Mon Sep 17 00:00:00 2001
From: Annisa Nuri Nabila <73707695+annisann@users.noreply.github.com>
Date: Fri, 5 May 2023 22:45:03 +0700
Subject: [PATCH 11/11] docs(fix): apply suggestions from code review

Co-authored-by: RiN <hi@rin.rocks>
---
 src/content/reference/react-dom/components/select.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/reference/react-dom/components/select.md b/src/content/reference/react-dom/components/select.md
index 532160264..52a1fce6d 100644
--- a/src/content/reference/react-dom/components/select.md
+++ b/src/content/reference/react-dom/components/select.md
@@ -4,7 +4,7 @@ title: "<select>"
 
 <Intro>
 
-[Komponen peramban (*browser*) bawaan `<select>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)  memungkinkan anda untuk me-*render* sebuah kotak pilih (*select box*) dengan opsi.
+[Komponen `<select>` bawaan peramban (*browser*)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)  memungkinkan anda untuk me-*render* sebuah kotak pilih (*select box*) dengan opsi.
 
 ```js
 <select>
@@ -23,7 +23,7 @@ title: "<select>"
 
 ### `<select>` {/*select*/}
 
-Untuk menampilkan kotak pilih (*select box*), *render* komponen [peramban (*browser*) bawaan `<select>`.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
+Untuk menampilkan kotak pilih (*select box*), *render* komponen [`<select>` bawaan peramban (*browser*).](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
 
 ```js
 <select>