Özet - Liste render

Ürün listesini fiyatına göre sıralayıp gösteren bir vitrin yazarsın.

Özet - Liste render

Bu grupta dizileri ekrana çizmeyi öğrendin. Üç temel adım var: map ile dönüştür, key ile benzersiz kimlik ver, gerekiyorsa filter ile süz.

key her zaman en dış düğüme yazılır ve kardeşler arasında benzersiz olmalı. En iyi key, verideki id alanıdır; indeks yalnızca append listelerde işe yarar.

Listeyi alt bileşene bölmek kodu okunaklı yapar: üst bileşen map'i çağırır, alt bileşen tek öğeyi çizer.

Uygulama Liste özet görevi

Aşağıdaki iskeleti tamamla. TodoList bileşeni yaz; todos dizisinde her öğenin id, text ve done alanları var. filter ile yalnızca !todo.done olanları seç, sonra map ile <li key={todo.id}>{todo.text}</li> yap. Dışa aktar.

Örnek çözümü göster

function TodoList() {
  const todos = [{ id: 1, text: "Süt al", done: false }, { id: 2, text: "Ekmek al", done: true }];
  return <ul>{todos.filter(t => !t.done).map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
}

export default TodoList;

Kendini test et

Aşağıdakilerden hangisi yanlış?
```
A random key refreshes every render.
```
- key kardeşler arasında benzersiz olmalı
- key olarak Math.random() en iyisidir
- map yeni dizi döndürür
- filter orijinali değiştirmez
Cevabı göster

key olarak Math.random() en iyisidir — Math.random() her render'da değişir; yanlış seçimdir.
Özet - Liste render: kavramları eşleştir

map

Dönüştürür
key

Kimlik verir
filter

Süzer
sort

Sıralar

Sıradaki ders: Proje: Alışveriş listesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler