Key itu penting
Termasuk bagian Dasar-Dasar dalam perjalanan React di Coddy. Pelajaran 36 dari 42.
Setiap elemen yang dikembalikan dari map memerlukan key, label unik yang stabil untuk item tersebut:
{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}Mengapa? Saat array berubah, React membandingkan list baru dengan list lama. Key memberi tahu React item yang mana, sehingga React memindahkan elemen alih-alih membuatnya ulang, dengan tetap mempertahankan state, fokus, dan animasi.
Kunci terbaik: id nyata dari datamu. Bisa diterima: nilai apa pun yang unik dan stabil untuk setiap item, seperti nama buah kita. Pilihan terakhir: indeks array. Ini akan bermasalah saat urutan diubah, karena posisi bukan identitas.
Coba sendiri
Pelajaran ini tidak memiliki tantangan kode.
Uji dirimuPelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.
Semua pelajaran di Dasar-Dasar
1Mengenal React
Apa Itu React?Komponen PertamamuAturan Satu IndukJSX Bukan HTMLRangkuman: Mengenal React4Props
Apa Itu Props?Meneruskan PropsDua PropsKomponen yang Sama, Data BaruProp ChildrenRingkasan: Props7Kondisi & List
Render dengan ternaryTampilkan dengan &&Render sebuah listKey itu pentingFilter, lalu mapUlasan: Kondisi & List