Как посчитать и вывести сумму?

Question

[Вадим Семенников]

Есть state:

state = {
        productsList: [ {
      "name":"JACKET",
    "price":"10",
      "id":"4o"
    },
    {
      "name":"JACKET",
         "price":"9.9",
      "id":"4"
    },
    {
      "name":"SHOE",
          "price":"101",
      "id":"65"
    },
    {
      "name":"Enduro",
          "price":"15",
      "id":"6jy5"
    }]
    };

Как посчитать сумму значений price в productsList? Пробовал:

countPrice = () => {
    let sum = 0;
            return this.state.productsList.map((product) => {
                console.log(sum);
                return sum += product.price;
            })
    }

Но появляется ошибка в консоли:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Answer 1

[0xD34F]

появляется ошибка в консоли <...> Functions are not valid as a React child.

Видимо, вы пытаетесь рендерить сумму как-то так: {this.countPrice}. А надо {this.countPrice()}. Ну или сделайте countPrice геттером.

Почему price у вас строки? Должны быть числа.

Расчёта суммы - почему возвращаете результат map'а? Это же массив. Переписываем:

countPrice = () => {
  return this.state.productsList.reduce((acc, n) => acc + n.price, 0);
}

Answer 2

[kn1ght_t]

const sum = state.productsList.reduce((acc, product) => acc + product.price, 0);