> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Rendering berulang

> Pelajari cara menggunakan konfigurasi 'Loop Data' YiDA untuk merender komponen serupa secara massal melalui pengikatan variabel array, serta cara mengakses data item loop dalam aplikasi low-code.

Untuk skenario yang memerlukan rendering berulang, mirip dengan pendekatan berikut di React, YiDA menyediakan opsi konfigurasi **Loop Data**. Dengan pengikatan variabel, rendering berulang dapat diimplementasikan dengan mudah:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
function NameList() {
  const names = [{
    name: 'Jack'
  }, {
    name: 'Rose'
  }];
	return (
  	<div>
    {
      names.map((item, index) => (
        <span>{ `No.${index}: ${item.name}` }</span>
      ))
    }
    </div>
  );
}
```

## Konfigurasikan

Loop data memerlukan struktur array—array string, array angka, maupun array object dapat digunakan. Konfigurasikan loop melalui pengaturan Loop Data pada atribut Premium:

Pengguna dapat mengikat loop data dengan dua cara:

* **Pengaturan statis** - Konfigurasikan data array statis yang akan dirender.
* **Pengikatan variabel** - Ikat variabel untuk mengambil loop data dari variabel global atau API jarak jauh.

Setelah konfigurasi loop selesai, komponen di dalam loop body dapat mengakses struktur internal loop data melalui dua konteks yang diinjeksikan berikut:

* **this.item** - Mengambil loop data untuk record saat ini.
* **this.index** - Mengambil indeks loop untuk record saat ini (dimulai dari 0).

Dalam skenario loop bersarang, sesuaikan nama variabel iterasi dan nama variabel indeks untuk menentukan informasi variabel injeksi konteks sekaligus menghindari konflik, seperti ditunjukkan di bawah ini:

<Tip>
  Komponen yang dikonfigurasikan dengan loop data akan menampilkan ikon loop kecil pada outline tree sebagai penanda bahwa loop data telah diatur:
</Tip>

## Kasus penggunaan

Berikut contoh sederhana untuk mendemonstrasikan cara menampilkan daftar siswa menggunakan loop data.

* Buat variabel global untuk menyimpan informasi siswa, seperti ditunjukkan di bawah ini:

* Seret komponen container ke halaman untuk mengikat loop data, seperti ditunjukkan di bawah ini:

* Letakkan dua komponen teks di dalam container untuk mengikat nama siswa (name) dan usia siswa (age), seperti ditunjukkan di bawah ini:

* Klik tombol Pratinjau di pojok kanan atas untuk melihat efek rendering berulang, seperti ditunjukkan di bawah ini:

* Perhatikan bahwa hobi siswa juga berupa array. Untuk merendernya, diperlukan loop bersarang. Seret komponen teks lain ke dalam container untuk merender hobi secara berulang. (Agar komponen teks tersebut dapat mengakses konten dari loop luar secara bersamaan, atur nama variabel iterasi dan indeks kustom untuk komponen teks tersebut.)

* Selanjutnya, ikat variabel ke atribut content pada teks untuk menampilkan konten dari kedua loop, seperti ditunjukkan di bawah ini:

* Terakhir, klik tombol Pratinjau untuk melihat efek pratinjau berikut: