Liste render nedir?
- React kursu
- Başlangıç
- Ders 27/84
- 4 dk
Bir diziyi JSX içine map ile dönmenin nasıl yapıldığını öğrenirsin.
Liste render nedir?
React'te bir diziyi ekrana çizmek için .map() kullanırsın. map, dizinin her öğesini bir JSX düğümüne çevirir ve sana yeni bir dizi verir.
Sonuçta elde ettiğin düğüm listesini süslü parantez içinde {names.map(...)} biçiminde gömersin. React her düğümü sırayla çizer.
Bu yöntem, elle onlarca <li> yazmaktan kurtarır; veri değiştiğinde liste kendiliğinden güncellenir.
Diziden JSX
map içinde bir ok fonksiyonu yazarsın. Ok fonksiyonu => okuyla tanımlanır; sağ taraf return yerine geçer.
Örnek: {[1,2,3].map(n => <li>{n}</li>)}. Burada her sayı bir <li> olur. Süslü parantez içinde {n} sayıyı gömer.
Ok fonksiyonunun ayrıntısını ileri seviyede göreceksin; şimdilik tek satırlık hâliyle kullandık.
Uygulama NameList bileşeni
Aşağıdaki iskeleti tamamla. NameList bileşeni yaz; names dizisini .map() ile <ul> içinde <li> düğümlerine çevir. Dışa aktarmayı unutma.
Başlangıç kodu
// NameList bileşenini buraya tanımlaÖrnek çözüm
function NameList() {
const names = ["Ayşe", "Mehmet", "Zeynep"];
return <ul>{names.map(n => <li>{n}</li>)}</ul>;
}
export default NameList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 map metodu ne döndürür?
map is a pure function; no side effects.- Orijinal diziyi değiştirir
- Yeni bir dizi döndürür Doğru cevap
- Tek bir değer döndürür
- Hiçbir şey döndürmez
Açıklama: map orijinali değiştirmez, yeni bir dizi döndürür.
2 Liste render nedir: eksik parçayı tamamla
<ul>{names.map(name => <li>____</li>)}</ul><ul>{names.map(name => <li>name</li>)}</ul>Açıklama: map parametresi name; li içine {name} yazılır.
3 Liste render nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
map |
Diziyi dönüştürür |
filter |
Öğeleri süzer |
forEach |
Dizi döndürmez |
key |
Benzersiz kimlik |