Prefer destructuring es-lint error

Question

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

Answer 1

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);
};

Answer 2

const quantity=basketItem.quantity;

below this destructuring method :

const {quantity}=basketItem;