Liste gövdesi

Öğeleri diziye göre render eden ListBody bileşenini yazarsın.

Liste gövdesi

İkinci parça ListBody: tüm listeyi çizer. items prop'unu alır ve .map() ile her öğeyi bir Item çağrısına çevirir.

Her Item'a key={item.id} ve item={item} veririz. key React'in öğeleri izlemesini, item ise veriyi taşır.

Liste boşsa map boş dizi verir; bu durumu sonraki derste ele alacağız.

Item'ı çağırma

ListBody, Item'ı <Item key={item.id} item={item} /> biçiminde çağırır. self-closing etiket /> ile biter; children yoktur.

Burada ListBody sadece veriyi döndürür; Item nasıl görüneceğine kendisi karar verir. Bu, bileşenler arası iş bölümüdür.

İleride bu yapıyı state ile besleyeceğğiz; şimdilik sabit veriyle çalışıyoruz.

Uygulama ListBody bileşeni

Aşağıdaki iskeleti tamamla. ListBody bileşeni yaz; items prop'unu destructuring ile al. <ul> içinde items.map(item => <Item key={item.id} item={item} />) döndürsün. Dışa aktar.

Örnek çözümü göster

function ListBody({ items }) {
  return <ul>{items.map(item => <Item key={item.id} item={item} />)}</ul>;
}

export default ListBody;

Kendini test et

Liste gövdesi: eksik parçayı tamamla

{items.map(item => <Item key={____} item={item} />)}

Cevabı göster

{items.map(item => <Item key={item.id} item={item} />)}

ListBody boş dizi alırsa ne çizer?
```
map returns an empty array for an empty array.
```
- Hiçbir şey (boş ul)
- Uyarı gösterir
- Hata verir
- Çöker
Cevabı göster

Hiçbir şey (boş ul) — Boş dizi map'le boş liste verir; ul boş kalır.
Liste gövdesi: kavramları eşleştir

ListBody

Tüm listeyi çizer
Item

Tek öğeyi çizer
items prop

Veri dizisi
key

Benzersiz kimlik

Sıradaki ders: Boş durum

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler