Bagaimana Cara Mengatasi Error "Encountered two children with the same key" di React?

Question

Bagaimana Cara Mengatasi Error "Encountered two children with the same key" di React?

Dibuat24 Januari 2024

·

Dilihat151 kali

1

Saya punya function komponen bernama Users:

function Users() {
  const users = [
    { kelompok: 1, nama: 'Budi' },
    { kelompok: 1, nama: 'angga' },
  ];
  return (
    <ol>
      {users.map((user) => (
        <li key={user.kelompok}>{user.nama}</li>
      ))}
    </ol>
  );
}

Ketika saya jalankan muncul pesan kesalahan ini di browser:

Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
at ol
at Users
at div
at App

Gimana cara mengatasinya ya?

JavaScript React Next.js

kicut

943

2 Jawaban

Urutkan berdasarkan:

Tampilkan jawaban lainnya

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait

Teguh Dwi Cahya Kusuma (diama) 15 · Accepted Answer · 2024-01-24T11:42:47.028Z

Error ini muncul apabila kamu memiliki child hasil dari mapping, tetapi memiliki key value yang sama persis, untuk mengatasinya bisa dengan mendefinisikan key value berdasarkan unique id, jika didalam kasus ini, kamu dapat merubah key menjadi index dari array

return (
    <ol>
       // Tambahkan parameter i di map return callback, lalu assign i ke key
      {users.map((user, i) => (
        <li key={i}>{user.nama}</li>
     ))}
     </ol>
  );