Liste render nedir?

Bir diziyi JSX içine map ile dönmenin nasıl yapıldığını öğrenirsin.

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.

Aşağıdaki iskeleti tamamla. NameList bileşeni yaz; names dizisini .map() ile <ul> içinde <li> düğümlerine çevir. Dışa aktarmayı unutma.

Örnek çözümü göster

function NameList() {
  const names = ["Ayşe", "Mehmet", "Zeynep"];
  return <ul>{names.map(n => <li>{n}</li>)}</ul>;
}

export default NameList;

Liste render nedir: eksik parçayı tamamla

<ul>{names.map(name => <li>____</li>)}</ul>

Cevabı göster

<ul>{names.map(name => <li>name</li>)}</ul>