Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

107
Vistas
Why is my Grand Total not updating after I increase or decrease the quantity in React?

This is a basic application that I am working on using React and Bootstrap. Here, The Grand Total is not changing when I update the quantity. I have attached the Sandbox link. Please let me know the mistake.

https://codesandbox.io/s/reactbootstrap-forked-k9n86s?file=/src/App.js

  /********Total quantity *************** */
  const grandTotal = () => {
    let total = 0;
    for (let product of products) {
      total += product.price * product.quantity;
    }
    console.log(total);
    return total;
  };
<tr className="text-end">
    <td colSpan={3}>Grand Total:</td>
    <td>{grandTotal()}</td>
</tr>

Thanks.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

In grandTotal you still refer to the initial array (products). It should be product.

  const grandTotal = () => {
    let total = 0;
    for (let p of product) {
      total += p.price * p.quantity;
    }
    console.log(total);
    return total;
  };

NOTE: Be clear when naming things. I would name initial products as initialProductsand use products variable name in useState.

Edit reactBootstrap (forked)

about 4 years ago · Juan Pablo Isaza Denunciar

0

the name of your variable is the problem products

const grandTotal = () => {
    let total = 0;
    for (let prd of product) {
      total += prd.price * prd.quantity;
    }
    console.log(total);
    return total;
  };

products point to this variable

const products = [
  {
    sno: "123",
    name: "Apple Watch",
    price: 290,
    quantity: 2
  },
  {
    sno: "567",
    name: "Samgung Watch",
    price: 278,
    quantity: 5
  },
  {
    sno: "785",
    name: "Cas",
    price: 123,
    quantity: 1
  }
];

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda