Lists and Keys
Merender array menjadi list UI dengan map dan key yang stabil.
Tujuan belajar
- Merender array dengan map
- Memakai key stabil pada list item
- Menghindari index sebagai key saat data punya id
Isi lesson
5 blok- 1.Banyak UI berasal dari arrayBelum selesaiWajib
- 2.Render lesson cardsBelum selesaiWajib
- 3.Jangan pakai index jika item punya idBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Banyak UI berasal dari array
WajibDaftar lesson, komentar, notifikasi, task, dan produk biasanya disimpan sebagai array. Di React, array diubah menjadi JSX dengan `map`.
Saat merender list, setiap item perlu `key`. Key membantu React mengenali item mana yang sama saat list berubah. Jika data punya `id`, gunakan `id` sebagai key.
Bagian ini memengaruhi progres lesson.
Render lesson cards
Wajibtype Lesson = {
id: string;
title: string;
minutes: number;
};
const lessons: Lesson[] = [
{ id: "state", title: "useState Dasar", minutes: 35 },
{ id: "events", title: "Event Handling", minutes: 40 },
];
function LessonList() {
return (
<section>
{lessons.map((lesson) => (
<article key={lesson.id}>
<h2>{lesson.title}</h2>
<p>{lesson.minutes} menit</p>
</article>
))}
</section>
);
}`map` mengubah setiap lesson menjadi card. `key={lesson.id}` memberi identitas stabil untuk setiap item.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan pakai index jika item punya id
Index array terlihat mudah, tetapi bisa membuat UI sulit diprediksi saat item berubah urutan, ditambah, atau dihapus. Jika data punya `id`, pakai `id` sebagai key.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususRender list dengan map dan key
Latihan mengubah array lesson menjadi list card dengan key stabil.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- `map` mengubah array menjadi list JSX.
- Setiap item list perlu key.
- Key sebaiknya stabil dan berasal dari data, misalnya `id`.
- Hindari index sebagai key jika data punya identitas sendiri.
- Berikutnya, kamu akan menghitung display dari state yang sudah ada.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Banyak UI berasal dari array.