Skip to content

docs: translation for useId #524

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 30, 2023
Merged

docs: translation for useId #524

Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
18f7bce
docs: translation for useId
AndriP8 May 1, 2023
3201ad8
docs: update title
AndriP8 May 1, 2023
77be943
docs: make merender text to have dash and italic
AndriP8 May 1, 2023
a494d22
docs: update wording by feedback
AndriP8 May 3, 2023
a190873
docs: update render word to be italic
AndriP8 May 8, 2023
63f6c52
docs: update word server and rendering to be italic
AndriP8 May 10, 2023
246d60b
Merge branch 'main' into translate-useid
mhaidarhanif Jul 16, 2023
0a0c9c7
Merge branch 'main' into translate-useid
zainfathoni Jul 30, 2023
2d1dfa9
Update src/content/reference/react/useId.md
zainfathoni Jul 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions src/content/reference/react/useId.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@ title: useId

<Intro>

`useId` is a React Hook for generating unique IDs that can be passed to accessibility attributes.

`useId` adalah React Hook untuk menghasilkan ID unik yang dapat diteruskan ke atribut aksesibilitas.
```js
const id = useId()
```
Expand All @@ -16,11 +15,11 @@ const id = useId()

---

## Reference {/*reference*/}
## Referensi {/*reference*/}

### `useId()` {/*useid*/}

Call `useId` at the top level of your component to generate a unique ID:
Panggil `useId` di tingkat atas komponen Anda untuk menghasilkan ID unik:

```js
import { useId } from 'react';
Expand All @@ -30,35 +29,35 @@ function PasswordField() {
// ...
```

[See more examples below.](#usage)
[Lihat lebih banyak contoh di bawah ini.](#usage)

#### Parameters {/*parameters*/}
#### Parameter {/*parameters*/}

`useId` does not take any parameters.
`useId` tidak mengambil parameter apapun.

#### Returns {/*returns*/}
#### Kembalian {/*returns*/}

`useId` returns a unique ID string associated with this particular `useId` call in this particular component.
`useId` mengembalikan string ID unik yang terkait dengan panggilan `useId` tertentu dalam komponen khusus ini.

#### Caveats {/*caveats*/}

* `useId` is a Hook, so you can only call it **at the top level of your component** or your own Hooks. You can't call it inside loops or conditions. If you need that, extract a new component and move the state into it.
* `useId` adalah sebuah Hook, jadi Anda hanya dapat memanggilnya **di tingkat teratas komponen Anda** atau Hook Anda sendiri. Anda tidak dapat memanggilnya di dalam perulangan (*loop*) atau kondisi (*conditions*). Jika Anda membutuhkannya, ekstrak komponen baru dan pindahkan *state* ke dalamnya.

* `useId` **should not be used to generate keys** in a list. [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
* `useId` **tidak boleh digunakan untuk menghasilkan *key*** dalam daftar. [*Key* harus dihasilkan dari data Anda.](/learn/rendering-lists#where-to-get-your-key)

---

## Usage {/*usage*/}
## Pengunaan {/*usage*/}

<Pitfall>

**Do not call `useId` to generate keys in a list.** [Keys should be generated from your data.](/learn/rendering-lists#where-to-get-your-key)
**Jangan panggil `useId` untuk menghasilkan *key* dalam daftar.** [*Key* harus dihasilkan dari data Anda](/learn/rendering-lists#where-to-get-your-key)

</Pitfall>

### Generating unique IDs for accessibility attributes {/*generating-unique-ids-for-accessibility-attributes*/}
### Menghasilkan ID unik untuk atribut aksesibilitas {/*generating-unique-ids-for-accessibility-attributes*/}

Call `useId` at the top level of your component to generate a unique ID:
Panggil `useId` di tingkat atas komponen Anda untuk menghasilkan ID unik:

```js [[1, 4, "passwordHintId"]]
import { useId } from 'react';
Expand All @@ -68,7 +67,7 @@ function PasswordField() {
// ...
```

You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different attributes:
Anda kemudian dapat meneruskan <CodeStep step={1}>ID yang dihasilkan</CodeStep> ke atribut yang berbeda:

```js [[1, 2, "passwordHintId"], [1, 3, "passwordHintId"]]
<>
Expand All @@ -77,11 +76,11 @@ You can then pass the <CodeStep step={1}>generated ID</CodeStep> to different at
</>
```

**Let's walk through an example to see when this is useful.**
**Mari telusuri contoh untuk melihat kapan ini berguna.**

[HTML accessibility attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) like [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) let you specify that two tags are related to each other. For example, you can specify that an element (like an input) is described by another element (like a paragraph).
[Atribut aksesibilitas HTML](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) seperti [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) membiarkan Anda menentukan bahwa dua *tag* terkait satu sama lain. Misalnya, Anda dapat menentukan bahwa suatu elemen (seperti sebuah masukan (`input`)) dijelaskan oleh elemen lain (seperti sebuah paragraf (`p`)).

In regular HTML, you would write it like this:
Dalam HTML biasa, Anda akan menulisnya seperti ini:

```html {5,8}
<label>
Expand All @@ -96,7 +95,7 @@ In regular HTML, you would write it like this:
</p>
```

However, hardcoding IDs like this is not a good practice in React. A component may be rendered more than once on the page--but IDs have to be unique! Instead of hardcoding an ID, generate a unique ID with `useId`:
Namun, menuliskan ID secara langsung di dalam kode (*hardcoding*) seperti ini bukanlah praktik yang baik di React. Sebuah komponen dapat dirender lebih dari sekali pada halaman—namun ID harus unik! Alih-alih melakukan pemaksaan ID, buat ID unik dengan `useId`:

```js {4,11,14}
import { useId } from 'react';
Expand All @@ -120,7 +119,7 @@ function PasswordField() {
}
```

Now, even if `PasswordField` appears multiple times on the screen, the generated IDs won't clash.
Sekarang, meskipun `PasswordField` muncul beberapa kali di layar, ID yang dihasilkan tidak akan berbenturan.

<Sandpack>

Expand Down Expand Up @@ -163,33 +162,34 @@ input { margin: 5px; }

</Sandpack>

[Watch this video](https://www.youtube.com/watch?v=0dNzNcuEuOo) to see the difference in the user experience with assistive technologies.
[Tonton video ini](https://www.youtube.com/watch?v=0dNzNcuEuOo) untuk melihat perbedaan pengalaman pengguna dengan teknologi bantu.

<Pitfall>

With [server rendering](/reference/react-dom/server), **`useId` requires an identical component tree on the server and the client**. If the trees you render on the server and the client don't match exactly, the generated IDs won't match.
Dengan [rendering server](/reference/react-dom/server), **`useId` membutuhkan pohon komponen yang identik di server dan klien**. Jika pohon yang Anda render di server dan klien tidak sama persis, ID yang dihasilkan tidak akan cocok.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Dengan [rendering server](/reference/react-dom/server), **`useId` membutuhkan pohon komponen yang identik di server dan klien**. Jika pohon yang Anda render di server dan klien tidak sama persis, ID yang dihasilkan tidak akan cocok.
Dengan [pe-*render*-an pada *server*](/reference/react-dom/server), **`useId` membutuhkan pohon komponen yang identik di *server* dan klien**. Jika pohon yang Anda *render* di *server* dan klien tidak sama persis, ID yang dihasilkan tidak akan cocok.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't fix it because the word pe-*render*-an is still under discussion


</Pitfall>

<DeepDive>

#### Why is useId better than an incrementing counter? {/*why-is-useid-better-than-an-incrementing-counter*/}
#### Mengapa useId lebih baik daripada penghitung kenaikan? {/*why-is-useid-better-than-an-incrementing-counter*/}

Anda mungkin bertanya-tanya mengapa `useId` lebih baik daripada menambahkan variabel global seperti `nextId++`.

You might be wondering why `useId` is better than incrementing a global variable like `nextId++`.
Manfaat utama `useId` adalah React memastikan bahwa ia bekerja dengan [rendering server.](/reference/react-dom/server) Selama rendering server, komponen Anda menghasilkan keluaran HTML. Kemudian, pada klien, [hidrasi](/reference/react-dom/client/hydrateRoot) melampirkan *event handler* Anda ke HTML yang dihasilkan. Agar hidrasi berfungsi, output klien harus cocok dengan HTML server.

The primary benefit of `useId` is that React ensures that it works with [server rendering.](/reference/react-dom/server) During server rendering, your components generate HTML output. Later, on the client, [hydration](/reference/react-dom/client/hydrateRoot) attaches your event handlers to the generated HTML. For hydration to work, the client output must match the server HTML.
Hal ini sangat sulit untuk dijamin dengan penghitung kenaikan karena urutan di mana komponen klien terhidrasi mungkin tidak sesuai dengan urutan di mana HTML dari *server* dipancarkan. Dengan memanggil `useId`, Anda memastikan bahwa hidrasi akan berfungsi, dan hasilnya akan cocok antara *server* dan klien.

This is very difficult to guarantee with an incrementing counter because the order in which the client components are hydrated may not match the order in which the server HTML was emitted. By calling `useId`, you ensure that hydration will work, and the output will match between the server and the client.

Inside React, `useId` is generated from the "parent path" of the calling component. This is why, if the client and the server tree are the same, the "parent path" will match up regardless of rendering order.
Di dalam React, `useId` dihasilkan dari “jalur induk” dari komponen pemanggil. Inilah sebabnya, jika klien dan pohon server sama, "jalur induk" akan cocok terlepas dari urutan rendering.

</DeepDive>

---

### Generating IDs for several related elements {/*generating-ids-for-several-related-elements*/}
### Menghasilkan ID untuk beberapa elemen terkait {/*generating-ids-for-several-related-elements*/}

If you need to give IDs to multiple related elements, you can call `useId` to generate a shared prefix for them:
Jika Anda perlu memberikan ID ke beberapa elemen terkait, Anda dapat memanggil `useId` untuk menghasilkan awalan bersama untuk mereka:

<Sandpack>

Expand All @@ -216,13 +216,13 @@ input { margin: 5px; }

</Sandpack>

This lets you avoid calling `useId` for every single element that needs a unique ID.
Ini memungkinkan Anda menghindari pemanggilan `useId` untuk setiap elemen yang membutuhkan ID unik.

---

### Specifying a shared prefix for all generated IDs {/*specifying-a-shared-prefix-for-all-generated-ids*/}
### Menentukan awalan bersama untuk semua ID yang dihasilkan {/*specifying-a-shared-prefix-for-all-generated-ids*/}

If you render multiple independent React applications on a single page, pass `identifierPrefix` as an option to your [`createRoot`](/reference/react-dom/client/createRoot#parameters) or [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) calls. This ensures that the IDs generated by the two different apps never clash because every identifier generated with `useId` will start with the distinct prefix you've specified.
Jika Anda me-*render* beberapa aplikasi React independen pada satu halaman, berikan `identifierPrefix` sebagai opsi untuk panggilan [`createRoot`](/reference/react-dom/client/createRoot#parameters) atau [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) Anda. Hal ini memastikan bahwa ID yang dihasilkan oleh dua aplikasi berbeda tidak pernah berbenturan karena setiap pengenal yang dibuat dengan `useId` akan dimulai dengan awalan berbeda yang telah Anda tentukan.

<Sandpack>

Expand Down