Filtreleme ve sıralama

Diziyi filtreleyip sıralayarak render etmeyi öğrenirsin.

Filtreleme ve sıralama

Listeyi çizmeden önce filter ile süzersin, sort ile sıralarsın. filter yeni bir dizi döndürür; orijinal diziye dokunmaz. sort ise diziyi yerinde değiştirir.

Örnek: {items.filter(i => i.active).map(...)}. Burada yalnızca active olan öğeler kalır, sonra map onları çizer.

İşlem sırası önemlidir: önce filter, sonra sort, en son map. Böylece gereksiz sıralama yapılmaz.

Orijinal değişmez

filter her zaman yeni dizi üretir; orijinali değiştirmez. sort ise orijinali yerinde değiştirir. Bu yüzden sıralama öncesi [...items] ile bir kopya almak güvenlidir.

React'te state'i doğrudan değiştirmezsin; bu yüzden kopya almak iyi bir alışkanlıktır. State'i ileride göreceğiz; şimdilik kopya almayı bil.

map ise her zaman yeni dizi üretir; ek kopyaya gerek yoktur.

Uygulama FilteredList bileşeni

Aşağıdaki iskeleti tamamla. FilteredList bileşeni yaz; items dizisinde her öğenin id, name ve active alanları var. Yalnızca active doğru olanları filter ile seç, sonra map ile <li key={item.id}>{item.name}</li> yap. Dışa aktar.

Örnek çözümü göster

function FilteredList() {
  const items = [{ id: 1, name: "Ayşe", active: true }, { id: 2, name: "Mehmet", active: false }];
  return <ul>{items.filter(i => i.active).map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

export default FilteredList;

Kendini test et

Filtreleme ve sıralama: kavramları eşleştir

filter

Öğeleri süzer
sort

Sıralar
reverse

Ters çevirir
map

Dönüştürür
[3,1,2].sort() ne döndürür?
```
sort returns an array.
```
- Sıralı dizi (aynı başvuru)
- [3,1,2]
- undefined
- [1,2,3]
Cevabı göster

Sıralı dizi (aynı başvuru) — sort sıralı diziyi döndürür; sayılar için karşılaştırıcı gerekir.

Filtreleme ve sıralama: eksik parçayı tamamla

{items.filter(____).map(i => <li key={i.id}>{i.name}</li>)}

Cevabı göster

{items.filter(i => i.active).map(i => <li key={i.id}>{i.name}</li>)}

Sıradaki ders: Özet - Liste render

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler