I have this function:

const calculateTotal = (items) => {
  return items.reduce((totalPrice, basketItem) => {
    const price = basketItem.product.price;
    const quantity = basketItem.quantity;
    const total = price * quantity;
    return totalPrice + total;
  }, 0);
};

How do I fix this with ES6+ destructuring?

I know I need something like (on line 4):

const { basketItem: quantity } = quantity;

but I can't get line 3 working

I have this function:

const calculateTotal = (items) => {
  return items.reduce((totalPrice, basketItem) => {
    const price = basketItem.product.price;
    const quantity = basketItem.quantity;
    const total = price * quantity;
    return totalPrice + total;
  }, 0);
};

How do I fix this with ES6+ destructuring?

I know I need something like (on line 4):

const { basketItem: quantity } = quantity;

but I can't get line 3 working

• javascript
• reactjs
• eslint
• destructuring

Share Improve this question Follow edited Jan 9, 2018 at 15:55 codejockie 10.9k44 gold badges4848 silver badges5757 bronze badges asked Jan 9, 2018 at 14:52 The WalrusThe Walrus 1,20877 gold badges3131 silver badges5050 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Based on the what you attempted doing, you could do this to get price from product and quantity from basketItem without having to declare variables on two separate lines.

const calculateTotal = (items) => {
  return items.reduce((totalPrice, basketItem) => {
    const { product: { price }, quantity } = basketItem;

    const total = price * quantity;
    return totalPrice + total;
  }, 0);
};

const quantity=basketItem.quantity;

below this destructuring method :

const {quantity}=basketItem;