Meydan okuma: Sepet özeti

Ü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 { '{ total }' } TL ve { '{ count }' } ürün olsun. Boş sepet için Sepet boş 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 Sepet boş döndür. total'ı reduce ile, count'u items.length ile hesapla. { '{ total }' } TL ve { '{ count }' } ürün göster. Dışa aktar.

Örnek çözümü göster

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;

Kendini test et

Toplam tutar hangi metotla hesaplanır?
- map
- forEach
- filter
- reduce
Cevabı göster

reduce — reduce ile toplam hesaplanır.
Sepet hesaplamalarını eşleştir

reduce

Toplam tutar
length

Ürün sayısı
price * qty

Satır tutarı
0

Başlangıç değeri

Sıradaki ders: Meydan okuma: Sayaç ve sıfırlama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler