Liste gövdesi
- React kursu
- Başlangıç
- Ders 34/84
- 5 dk
Öğ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.
Başlangıç kodu
// ListBody bileşenini buraya tanımla
// Item zaten tanımlıÖrnek çözüm
function ListBody({ items }) {
return <ul>{items.map(item => <Item key={item.id} item={item} />)}</ul>;
}
export default ListBody;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Liste gövdesi: eksik parçayı tamamla
{items.map(item => <Item key={____} item={item} />)}{items.map(item => <Item key={item.id} item={item} />)}Açıklama: key olarak item.id verdin.
2 ListBody boş dizi alırsa ne çizer?
map returns an empty array for an empty array.- Hiçbir şey (boş ul) Doğru cevap
- Uyarı gösterir
- Hata verir
- Çöker
Açıklama: Boş dizi map'le boş liste verir; ul boş kalır.
3 Liste gövdesi: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
ListBody |
Tüm listeyi çizer |
Item |
Tek öğeyi çizer |
items prop |
Veri dizisi |
key |
Benzersiz kimlik |