Menampilkan list di React artinya mengubah array data jadi deretan elemen, satu elemen untuk tiap isi array. Caranya pakai map, method array yang sudah kamu kenal dari JavaScript. Bayangin bikin undangan nikahan: desainnya cukup satu, daftar tamunya yang panjang, dan mesin cetak memakai desain yang sama untuk tiap nama. Di React, desainnya adalah JSX untuk satu item, daftar tamunya adalah array, dan mesin cetaknya map.
🧪 Tebakan cepat: kalau kamu menulis
buah.map((item) => { <li>{item}</li> }), dengan kurung kurawal, berapa<li>yang muncul: 3 atau 0? Tebak dulu, jawabannya ada di bagian "Dari array ke<li>".
Dari array ke <li>
function App() {
const buah = ["Apel", "Mangga", "Jeruk"];
return (
<ul>
{buah.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}
{ ... }di dalam JSX menjalankan JavaScript, sama seperti waktu kamu menampilkan variabel.buah.map(...)menjalankan callback untuk tiap buah, lalu mengumpulkan semua yang dikembalikan callback jadi array baru.(item) => ( <li>...</li> )memakai kurung biasa, jadi<li>langsung dikembalikan.key={item}memberi tanda pengenal ke tiap<li>. Penjelasannya ada di bagian berikutnya.
Apa yang terjadi tiap putaran:
| Putaran | item |
Yang dikembalikan callback |
|---|---|---|
| 1 | "Apel" |
<li key="Apel">Apel</li> |
| 2 | "Mangga" |
<li key="Mangga">Mangga</li> |
| 3 | "Jeruk" |
<li key="Jeruk">Jeruk</li> |
map mengembalikan array berisi 3 elemen <li>. React bisa menggambar array: isinya digambar satu per satu, sesuai urutan. Hasilnya di browser:
<ul>
<li>Apel</li>
<li>Mangga</li>
<li>Jeruk</li>
</ul>
Tambah satu buah ke array, dan <li> keempat muncul sendiri. JSX-nya gak perlu diubah sama sekali.
Kalau callback-nya pakai kurung kurawal, (item) => { <li>{item}</li> }, gak ada yang dikembalikan karena gak ada return. Hasil map jadi [undefined, undefined, undefined], dan React gak menggambar apa-apa untuk undefined. Jadi yang muncul 0 <li>, tanpa error. Itu jawaban tebakannya. Pakai kurung biasa, atau tulis return <li>{item}</li>; di dalam kurung kurawalnya.
key: tanda pengenal tiap item
Tiap elemen yang dibuat map butuh prop key: nilai yang membedakan item itu dari item lain di list yang sama. Waktu datanya berubah dan React menggambar ulang, React mencocokkan item lama dengan item baru lewat key. Tanpa key, React menulis peringatan di console: Each child in a list should have a unique "key" prop.
- Unik di antara item satu list. Dua item dengan
keyyang sama bikin React salah pasang. - Tetap: item yang sama selalu dapat
keyyang sama di setiap render. - Ditaruh di elemen yang dikembalikan
map, di sini<li>, bukan di<ul>. - Boleh string atau angka.
key={1}dankey="Apel"sama-sama jalan.
Data dari database hampir selalu punya id, dan itulah key terbaik. Daftar teks yang semuanya beda, seperti nama buah tadi, boleh pakai teksnya sendiri.
Bagaimana dengan index, posisi item di array ((item, index) => <li key={index}>)? index itu nomor urut, bukan identitas. Kalau ada item yang disisipkan di atas, dihapus, atau diurutkan ulang, nomor urut semua item bergeser, dan React bisa memasangkan item yang salah. Jadi index sebagai key gak ideal, cuma aman untuk list yang urutannya gak pernah berubah. Kenapa bisa salah pasang, dibahas tuntas di pelajaran berikutnya, Keys & Reconciliation.
List dari array object
Data sungguhan biasanya berupa object. Ambil isinya dengan titik, dan pakai id sebagai key:
function App() {
const buah = [
{ id: 1, nama: "Apel", harga: 12000 },
{ id: 2, nama: "Mangga", harga: 15000 },
{ id: 3, nama: "Jeruk", harga: 8000 },
];
return (
<ul>
{buah.map((b) => (
<li key={b.id}>
{b.nama}: Rp{b.harga.toLocaleString("id-ID")}
</li>
))}
</ul>
);
}
bberisi satu object buah, jadi namanyab.namadan harganyab.harga.key={b.id}memakai id dari data: unik, dan gak berubah walau urutannya berubah.toLocaleString("id-ID")menulis angka dengan titik ribuan:12000jadi12.000.
Hasilnya tiga baris: Apel: Rp12.000, Mangga: Rp15.000, Jeruk: Rp8.000.
Mau cuma sebagian? filter dulu, baru map:
{buah
.filter((b) => b.harga < 10000)
.map((b) => <li key={b.id}>{b.nama}</li>)}
Cuma Jeruk yang harganya di bawah Rp10.000, jadi cuma satu <li> yang dibuat.
⚠️ Jebakan yang sering ketemu
- Kurung kurawal tanpa
return.map((b) => { <li>...</li> })menghasilkan list kosong tanpa error. Pakai kurung biasa, atau tulisreturn. forEachbukannyamap.forEachgak mengembalikan apa-apa (undefined), jadi gak ada yang digambar. Untuk membuat JSX dari array, selalumap.- Lupa
key, ataukeykembar. Muncul peringatan di console, dan React bisa salah pasang item waktu list berubah. Pakaiiddari data. - Mengetik
<li>Apel</li>satu per satu. Di layar hasilnya sama, tapi begitu datanya berubah, tampilannya gak ikut berubah. Isi tiap<li>harus datang dari array.
TL;DR: List di React dibuat dengan array.map(): callback-nya mengembalikan satu elemen untuk tiap isi array, dan React menggambar array elemen itu sesuai urutan. Tiap elemen butuh key yang unik di list itu dan tetap untuk item yang sama, idealnya id dari data, ditaruh di elemen yang dikembalikan map (bukan di <ul>). index sebagai key gak ideal kalau urutan list bisa berubah. Callback dengan { } butuh return, kalau gak list-nya kosong. forEach gak menggambar apa-apa. Butuh sebagian saja? filter dulu, baru map.
