Filtreleme ve sıralama
- React kursu
- Başlangıç
- Ders 30/84
- 4 dk
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.
Başlangıç kodu
// FilteredList bileşenini buraya tanımlaÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Filtreleme ve sıralama: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
filter |
Öğeleri süzer |
sort |
Sıralar |
reverse |
Ters çevirir |
map |
Dönüştürür |
2 [3,1,2].sort() ne döndürür?
sort returns an array.- Sıralı dizi (aynı başvuru) Doğru cevap
- [3,1,2]
- undefined
- [1,2,3]
Açıklama: sort sıralı diziyi döndürür; sayılar için karşılaştırıcı gerekir.
3 Filtreleme ve sıralama: eksik parçayı tamamla
{items.filter(____).map(i => <li key={i.id}>{i.name}</li>)}{items.filter(i => i.active).map(i => <li key={i.id}>{i.name}</li>)}Açıklama: Yalnızca active olanları map'le çizersin.