Skip to content

docs: translation of <Fragment> (<>) page #486

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.

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 23 commits into from
May 8, 2023
Merged
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
aeea386
translate fragment to caveats section
AudiWu Apr 27, 2023
c2ee6d8
translate finish
AudiWu Apr 28, 2023
8860fb8
Merge branch 'main' into main
mhaidarhanif Apr 28, 2023
c133b69
fix: apply suggestion besides
AudiWu Apr 29, 2023
f589356
Merge branch 'main' into main
AudiWu Apr 29, 2023
ca8f852
fix: merender to me-*render* and peringatan to caveats
AudiWu Apr 30, 2023
86e31fb
fix: set italic for non-bahasa word
AudiWu Apr 30, 2023
2ff30a9
Merge branch 'main' into main
mhaidarhanif Apr 30, 2023
a560016
Merge branch 'main' into main
mhaidarhanif Apr 30, 2023
26ad37a
fix: remove 'atau' and change 'pembungkus' to 'wrapper' in fragment i…
AudiWu May 1, 2023
856a7ca
fix: eksplisit word order
AudiWu May 1, 2023
f7c50b4
fix: remove italic in heading
AudiWu May 1, 2023
66bb147
fix: fix non bahasa italic wording and change the order of 'spesial' …
AudiWu May 1, 2023
9cf996c
Merge branch 'main' into main
mhaidarhanif May 1, 2023
b5ab458
fix: 'assigning' word, change 'saja' to 'kedalaman', and add some word
AudiWu May 1, 2023
dbcb604
Merge branch 'main' into main
mhaidarhanif May 1, 2023
af9b60a
Merge branch 'main' into main
zainfathoni May 2, 2023
69836ac
fix: rephrase some sentence
AudiWu May 2, 2023
bc2a978
Merge branch 'main' into main
AudiWu May 6, 2023
730c23e
Merge branch 'main' into main
mhaidarhanif May 7, 2023
fe4c1ca
Merge branch 'main' into main
zainfathoni May 8, 2023
1ba13db
Merge branch 'main' into main
zainfathoni May 8, 2023
93906c9
docs(fragment): add missing "menentukan" to "menetapkan" changes
zainfathoni May 8, 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
50 changes: 25 additions & 25 deletions src/content/reference/react/Fragment.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ title: <Fragment> (<>...</>)

<Intro>

`<Fragment>`, often used via `<>...</>` syntax, lets you group elements without a wrapper node.
`<Fragment>`, sering digunakan melalui sintaksis `<>...</>`, memungkinkan Anda mengelompokkan elemen tanpa *wrapper node*.

```js
<>
Expand All @@ -19,29 +19,29 @@ title: <Fragment> (<>...</>)

---

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

### `<Fragment>` {/*fragment*/}

Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases.
Bungkus elemen-elemen di dalam `<Fragment>` untuk mengelompokkan mereka dalam situasi di mana Anda membutuhkan satu elemen. Mengelompokkan elemen di dalam `Fragment` tidak akan mempengaruhi hasil pada DOM; elemen-elemen tersebut seolah-olah seperti tidak dikelompokkan. *Tag JSX* kosong `<></>` adalah singkatan untuk `<Fragment></Fragment>` dalam banyak kasus.

#### Props {/*props*/}

- **optional** `key`: Fragments declared with the explicit `<Fragment>` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key)
- `key` **opsional**: *Fragment* yang dideklarasikan dengan sintaksis `<Fragment>` eksplisit mungkin memiliki [`key`.](/learn/rendering-lists#keeping-list-items-in-order-with-key)

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

- If you want to pass `key` to a Fragment, you can't use the `<>...</>` syntax. You have to explicitly import `Fragment` from `'react'` and render `<Fragment key={yourKey}>...</Fragment>`.
- Jika Anda ingin mengoper `key` ke *Fragment*, Anda tidak bisa menggunakan sintaksis `<>...</>`. Anda harus secara eksplisit mengimpor `Fragment` dari `'react'` dan me-*render* `<Fragment key={yourKey}>...</Fragment>`.

- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)
- React tidak akan [mengatur ulang *state*](/learn/preserving-and-resetting-state) ketika Anda me-*render* dari `<><Child /></>` ke `[<Child />]` atau sebaliknya, atau ketika Anda me-*render* `<><Child /></>` ke `<Child />` dan sebaliknya. Ini hanya bekerja dalam satu tingkat kedalaman: contohnya, beralih dari `<><><Child /></></>` ke `<Child />` akan mengatur ulang *state*. Lihat semantik yang lebih jelas [di sini.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b)

---

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

### Returning multiple elements {/*returning-multiple-elements*/}
### Menetapkan banyak elemen {/*returning-multiple-elements*/}

Use `Fragment`, or the equivalent `<>...</>` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group:
Gunakan `Fragment`, atau sintaksis `<>...</>`, untuk mengelompokkan beberapa elemen menjadi satu. Anda bisa menggunakannya untuk meletakkan banyak elemen di mana saja, di mana satu elemen itu bisa muncul. Misalnya, komponen hanya bisa mengembalikan satu elemen, tetapi dengan menggunakan *Fragment*, Anda dapat mengelompokkan beberapa elemen menjadi satu dan kemudian mengembalikannya sebagai sebuah kelompok:

```js {3,6}
function Post() {
Expand All @@ -54,7 +54,7 @@ function Post() {
}
```

Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<article>` DOM nodes appear as siblings without wrappers around them:
*Fragment* sangat berguna karena mengelompokkan elemen dengan *Fragment* tidak akan mempengaruhi *layout* atau *style*, berbeda jika Anda membungkus elemen dalam wadah lain seperti elemen DOM. Jika Anda memeriksa contoh ini dengan peralatan yang disediakan peramban (*browser tools*), Anda akan melihat semua DOM *node* `<h1>` dan `<p>` muncul sebagai saudara (*siblings*) tanpa pembungkus di sekitar mereka:

<Sandpack>

Expand Down Expand Up @@ -94,9 +94,9 @@ function PostBody({ body }) {

<DeepDive>

#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/}
#### Bagaimana menulis Fragment tanpa sintaksis spesial? {/*how-to-write-a-fragment-without-the-special-syntax*/}

The example above is equivalent to importing `Fragment` from React:
Contoh di atas sama dengan mengimpor `Fragment` dari React:

```js {1,5,8}
import { Fragment } from 'react';
Expand All @@ -111,15 +111,15 @@ function Post() {
}
```

Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments)
Biasanya Anda tidak memerlukan cara ini kecuali Anda perlu [mengoper `key` ke `Fragment` Anda.](#rendering-a-list-of-fragments)

</DeepDive>

---

### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/}
### Menetapkan banyak elemen ke variabel {/*assigning-multiple-elements-to-a-variable*/}

Like any other element, you can assign Fragment elements to variables, pass them as props, and so on:
Seperti komponen yang lain, Anda bisa menetapkan elemen *Fragment* ke variabel, dan mengoper mereka sebagai *props*, dan seterusnya:

```js
function CloseDialog() {
Expand All @@ -131,25 +131,25 @@ function CloseDialog() {
);
return (
<AlertDialog buttons={buttons}>
Are you sure you want to leave this page?
Apakah anda yakin untuk meninggalkan halaman ini?
</AlertDialog>
);
}
```

---

### Grouping elements with text {/*grouping-elements-with-text*/}
### Mengelompokkan elemen dengan teks {/*grouping-elements-with-text*/}

You can use `Fragment` to group text together with components:
Anda bisa mengunakan `Fragment` untuk mengelompokkan teks dengan komponen:

```js
function DateRangePicker({ start, end }) {
return (
<>
From
Dari
<DatePicker date={start} />
to
ke
<DatePicker date={end} />
</>
);
Expand All @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) {

---

### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/}
### Me-render daftar Fragment {/*rendering-a-list-of-fragments*/}

Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute:
Inilah situasi di mana Anda perlu menulis `Fragment` secara eksplisit daripada menggunakan sintaksis `<></>`. Saat Anda [me-*render* beberapa elemen dalam *loop*](/learn/rendering-lists), Anda perlu menetapkan `key` untuk setiap elemen. Jika elemen dalam *loop* adalah *Fragment*, Anda perlu menggunakan sintaksis elemen *JSX* normal untuk menyediakan atribut `key`:

```js {3,6}
function Blog() {
Expand All @@ -173,16 +173,16 @@ function Blog() {
}
```

You can inspect the DOM to verify that there are no wrapper elements around the Fragment children:
Anda bisa memeriksa DOM untuk memastikan bahwa tidak ada elemen pembungkus di sekitar anak-anak (*children*) *Fragment*:

<Sandpack>

```js
import { Fragment } from 'react';

const posts = [
{ id: 1, title: 'An update', body: "It's been a while since I posted..." },
{ id: 2, title: 'My new blog', body: 'I am starting a new blog!' }
{ id: 1, title: 'Sebuah pembaharuan', body: "Sudah lama tidak posting..." },
{ id: 2, title: 'Blog baru saya', body: 'Saya memulai blog baru!' }
];

export default function Blog() {
Expand Down