Meydan okuma: Sepet özeti
- React kursu
- Başlangıç
- Ders 82/84
- 6 dk
Ürün listesinden toplam fiyatı hesaplayan bir özet bileşeni yazarsın.
Meydan okuma: Sepet özeti
Bu meydan okuma, CartSummary bileşenini yazmanı istiyor. items prop'u, her biri { '{ name, price, qty }' } olan nesneler dizisi alsın. Toplam tutarı ve ürün sayısını göster.
Toplam için reduce kullan: items.reduce((sum, i) => sum + i.price * i.qty, 0). Ürün sayısı için items.length.
Ekranda <p>{ '{ total }' } TL</p> ve <p>{ '{ count }' } ürün</p> olsun. Boş sepet için <p>Sepet boş</p> erken return ile göster.
Uygulama CartSummary yaz
Aşağıdaki iskeleti tamamla. CartSummary bileşeni yaz. ({ '{ items }' }) parametresi alsın. Eğer items.length === 0 ise erken return ile <p>Sepet boş</p> döndür. total'ı reduce ile, count'u items.length ile hesapla. <p>{ '{ total }' } TL</p> ve <p>{ '{ count }' } ürün</p> göster. Dışa aktar.
Başlangıç kodu
// CartSummary bileşenini buraya yazÖrnek çözüm
function CartSummary({ items }) {
if (items.length === 0) return <p>Sepet boş</p>;
const total = items.reduce((sum, i) => sum + i.price * i.qty, 0);
const count = items.length;
return (
<div>
<p>{total} TL</p>
<p>{count} ürün</p>
</div>
);
}
export default CartSummary;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Toplam tutar hangi metotla hesaplanır?
- map
- forEach
- filter
- reduce Doğru cevap
Açıklama: reduce ile toplam hesaplanır.
2 Sepet hesaplamalarını eşleştir
| Kavram | Anlamı |
|---|---|
reduce |
Toplam tutar |
length |
Ürün sayısı |
price * qty |
Satır tutarı |
0 |
Başlangıç değeri |