Merender List & Keys di React | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

Merender List & Keys di React | Dasar ReactJS untuk Pemula | Mahir.dev | Mahir.dev Academy

jsx

import React from 'react';
 
function DaftarBuah() {
  const buahBuahan = ["Apel", "Jeruk", "Mangga", "Pisang", "Anggur"];
 
  // Pake .map() buat ngubah tiap nama buah jadi elemen <li>
  const listItems = buahBuahan.map((buah, index) => 
    // PENTING: perhatiin atribut 'key' di sini!
    <li key={index}>{buah}</li> 
  );
 
  return (
    <div>
      <h2>Daftar Buah Favorit:</h2>
      <ul>
        {listItems} {/* Render array elemen JSX di sini */}
      </ul>
    </div>
  );
}
 
// Bisa juga .map() langsung di dalem JSX:
function DaftarBuahRingkes() {
  const buahBuahan = ["Apel", "Jeruk", "Mangga", "Pisang", "Anggur"];
  return (
    <div>
      <h2>Daftar Buah (Versi Ringkes):</h2>
      <ul>
        {buahBuahan.map((buah, index) => (
          <li key={index}>{buah}</li>
        ))}
      </ul>
    </div>
  );
}
 
function App() {
  return (
    <>
      <DaftarBuah />
      <hr />
      <DaftarBuahRingkes />
    </>
  );
}
 
export default App;

Harus Unik di Antara Saudara-saudaranya (Siblings): key gak perlu unik secara global di seluruh aplikasi, tapi harus unik di dalem satu set list item yang lagi dirender barengan itu.
Harus Stabil: Nilai key buat satu item data tertentu idealnya gak berubah-ubah antar render, kecuali kalau item data itu emang bener-bener item yang beda.
Sebaiknya Bukan Indeks Array (Kalau Urutan Item Bisa Berubah atau Item Bisa Dihapus/Ditambah di Tengah):
- Meskipun di contoh pertama kita pake index array sebagai key, ini gak selalu ide bagus, apalagi kalau:
  - Urutan item di array-mu bisa berubah (misal, di-sort ulang).
  - Kamu bisa nambahin atau ngapus item dari tengah-tengah array.
- Kenapa? Kalau key pake indeks, terus kamu hapus item di tengah, indeks item-item setelahnya bakal geser. React bisa jadi salah ngira kalau item yang geser itu item yang sama tapi datanya berubah, padahal sebenernya itemnya beda. Ini bisa nyebabin bug aneh atau state komponen child jadi gak konsisten.
- Solusi Terbaik: Kalau data di array-mu punya ID unik (misalnya, ID produk dari database, ID postingan), pake ID unik itu sebagai key! Ini pilihan yang paling aman dan stabil.
  jsx
```
const produk = [
  { id: 'p1', nama: 'Laptop', harga: 15000000 },
  { id: 'p2', nama: 'Mouse', harga: 200000 },
  { id: 'p3', nama: 'Keyboard', harga: 500000 }
];
 
// ...
<ul>
  {produk.map(item => (
    <li key={item.id}> {/* Pake item.id sebagai key */}
      {item.nama} - Rp {item.harga}
    </li>
  ))}
</ul>
```
- Kalau bener-bener gak ada ID unik dan urutan itemnya dijamin gak bakal berubah sama sekali, baru deh index bisa jadi pilihan terakhir (tapi tetep waspada). Atau, kamu bisa coba generate ID unik sementara di sisi klien (misal, pake library uuid kalau perlu).

jsx

import React from 'react';
 
// Komponen child buat nampilin satu tugas
function ItemTugas({ id, teksTugas, sudahSelesai }) {
  return (
    <li style={{ textDecoration: sudahSelesai ? 'line-through' : 'none' }}>
      {teksTugas}
    </li>
  );
}
 
function DaftarTugas() {
  const daftarSemuaTugas = [
    { id: 'tgs1', teks: 'Belajar React Props', selesai: true },
    { id: 'tgs2', teks: 'Belajar React State', selesai: true },
    { id: 'tgs3', teks: 'Belajar Render List', selesai: false },
    { id: 'tgs4', teks: 'Bikin Proyek Keren', selesai: false }
  ];
 
  return (
    <div>
      <h2>Tugas-Tugasku:</h2>
      <ul>
        {daftarSemuaTugas.map(tugas => (
          // PENTING: key ditaruh di elemen terluar yang di-return dari .map()
          // Dalam hal ini, di komponen ItemTugas itu sendiri
          <ItemTugas 
            key={tugas.id} // Pake ID unik dari data tugas sebagai key
            id={tugas.id} // Kirim id sebagai prop biasa kalau dibutuhin di dalem ItemTugas
            teksTugas={tugas.teks} 
            sudahSelesai={tugas.selesai} 
          />
        ))}
      </ul>
    </div>
  );
}
 
export default DaftarTugas;