Challenge: Cart summary

Write a summary component that computes the total price from a product list.

Challenge: Cart summary

This challenge asks you to write a CartSummary component. The items prop is an array of objects, each { '{ name, price, qty }' }. Show the total amount and item count.

For the total, use reduce: items.reduce((sum, i) => sum + i.price * i.qty, 0). For the count, use items.length.

Show { '{ total }' } TL and { '{ count }' } items. For an empty cart, show Cart is empty via early return.

Exercise Write CartSummary

Complete the skeleton. Write a CartSummary component. Take ({ '{ items }' }) as parameter. If items.length === 0, early return Cart is empty. Compute total with reduce and count with items.length. Show { '{ total }' } TL and { '{ count }' } items. Export it.

Show example solution

function CartSummary({ items }) {
  if (items.length === 0) return <p>Cart is empty</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} items</p>
    </div>
  );
}

export default CartSummary;

Test yourself

Which method computes the total?
- map
- forEach
- filter
- reduce
Show answer

reduce — reduce computes the total.
Match the cart computations

reduce

Total
length

Item count
price * qty

Line total
0

Initial value

Next lesson: Challenge: Counter and reset

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies