Özet - Liste render
- React kursu
- Başlangıç
- Ders 31/84
- 5 dk
Ü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.
Başlangıç kodu
// TodoList bileşenini buraya tanımlaÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
A random key refreshes every render.- key kardeşler arasında benzersiz olmalı
- key olarak Math.random() en iyisidir Doğru cevap
- map yeni dizi döndürür
- filter orijinali değiştirmez
Açıklama: Math.random() her render'da değişir; yanlış seçimdir.
2 Özet - Liste render: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
map |
Dönüştürür |
key |
Kimlik verir |
filter |
Süzer |
sort |
Sıralar |