Öğe bileşeni

Tek bir alışveriş öğesini gösteren ListItem bileşenini yazarsın.

Öğe bileşeni

İlk parça Item: tek bir alışveriş öğesini çizer. Veriyi item prop'uyla alır ve <li> döndürür.

İçeride öğenin adını ve adedini gösteririz: <li>{item.name} ({item.qty})</li>. Süslü parantez içinde ifadeyi gömeriz.

Item'ı küçük ve saf tutarız: aynı veri hep aynı çıktıyı verir. Bu, yeniden kullanımı kolaylaştırır.

Prop destructuring

Bileşen tanımında prop'u doğrudan açabilirsin: function Item({ item }). Bu, props.item yazmaktan kısadır.

Bu yazıma yıkım (destructuring) denir. Süslü parantez, parametre listesinde prop'un adını söyler.

Yıkımın ayrıntısını ileri seviyede göreceksin; şimdilik prop'u açmak için kullanıyoruz. Birden çok prop'u da aynı biçimde açabilir, hatta varsayılan değer verebilirsin.

Uygulama Item bileşeni

Aşağıdaki iskeleti tamamla. Item bileşeni yaz; item prop'unu destructuring ile al (parametre { item }). <li>{item.name} ({item.qty})</li> döndürsün. Dışa aktar.

Örnek çözümü göster

function Item({ item }) {
  return <li>{item.name} ({item.qty})</li>;
}

export default Item;

Kendini test et

Item bileşeni veriyi nasıl alır?
```
A prop carries data from parent to child.
```
- state ile
- fetch ile
- global değişkenle
- item prop'uyla
Cevabı göster

item prop'uyla — Veriyi item prop'uyla alır.

Öğe bileşeni: eksik parçayı tamamla

function Item({ item }) { return <li>{item.name} ({____})</li>; }

Cevabı göster

function Item({ item }) { return <li>{item.name} ({item.qty})</li>; }

Öğe bileşeni: kavramları eşleştir

item prop

Tek öğe verisi
li

Satır etiketi
name

Ürün adı
qty

Adet

Sıradaki ders: Liste gövdesi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler