Belajar React Dasar #8: List & Keys

• Apa Itu List?
• Menampilkan List dengan map()
• Apa Itu Keys?
• Menambahkan Key pada List
• Menampilkan List dengan Object
• List dengan Component Terpisah
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Conditional Rendering, bagaimana cara menampilkan UI berdasarkan kondisi tertentu.

Pada artikel kali ini, kita akan membahas tentang List & Keys di React. Fitur ini sangat penting karena hampir semua aplikasi menampilkan data dalam bentuk daftar, seperti daftar produk, daftar artikel, atau daftar todo.

Apa Itu List?

List di React digunakan untuk menampilkan data yang berbentuk array. Cara menampilkannya adalah dengan menggunakan fungsi map() dari JavaScript.

Menampilkan List dengan map()

Mari kita buat contoh daftar nama menggunakan map().

function App() {
  const names = ["Budi", "Siti", "Andi", "Dewi"];

  return (
    <div>
      <h1>Daftar Nama:</h1>
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Penjelasan:

• Kita membuat array names.
• Menggunakan map() untuk mengubah setiap item array menjadi elemen <li>.
• Hasilnya, daftar nama akan ditampilkan di browser.

Apa Itu Keys?

Saat menampilkan list, React membutuhkan key untuk setiap elemen agar bisa membedakan satu elemen dengan yang lain. Key membantu React untuk melakukan update UI lebih efisien. Key harus bersifat unik di dalam list.

Menambahkan Key pada List

function App() {
  const names = ["Budi", "Siti", "Andi", "Dewi"];

  return (
    <div>
      <h1>Daftar Nama:</h1>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Penjelasan:

• Kita menambahkan atribut key pada elemen <li>.
• Di sini kita menggunakan index dari map() sebagai key.

Catatan: Jika data punya id unik, sebaiknya gunakan id sebagai key, bukan index, agar lebih aman ketika data berubah.

Menampilkan List dengan Object

Biasanya data lebih kompleks berbentuk object.

function App() {
  const users = [
    { id: 1, name: "Budi", age: 20 },
    { id: 2, name: "Siti", age: 22 },
    { id: 3, name: "Andi", age: 19 },
  ];

  return (
    <div>
      <h1>Daftar User:</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} - {user.age} tahun
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Penjelasan:

• Kita menggunakan user.id sebagai key karena setiap user memiliki id yang unik.
• List akan menampilkan nama dan umur dari setiap user.

List dengan Component Terpisah

Kita juga bisa membuat component terpisah untuk setiap item list agar kode lebih rapi.

function UserItem({ name, age }) {
  return (
    <li>
      {name} - {age} tahun
    </li>
  );
}

function App() {
  const users = [
    { id: 1, name: "Budi", age: 20 },
    { id: 2, name: "Siti", age: 22 },
    { id: 3, name: "Andi", age: 19 },
  ];

  return (
    <div>
      <h1>Daftar User:</h1>
      <ul>
        {users.map((user) => (
          <UserItem key={user.id} name={user.name} age={user.age} />
        ))}
      </ul>
    </div>
  );
}

export default App;

Penjelasan:

• Kita membuat component UserItem untuk menampilkan setiap user.
• Data dikirim lewat props name dan age.
• key tetap wajib diberikan di elemen list, dalam hal ini pada UserItem.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang List & Keys di React. Kita sudah mencoba menampilkan data array menggunakan map(), memahami pentingnya key untuk performa React, serta memisahkan item list ke dalam component agar kode lebih rapi.

Di artikel berikutnya, kita akan membahas tentang Form, yaitu bagaimana cara membuat input yang bisa dikontrol React.

Terima kasih