Tengo un componente en React que recibe una matriz cat que contiene varios objetos. En cada uno de estos objetos, hay un atributo .price.
Lo que espero hacer es sumar todos estos precios e imprimirlos una vez dentro de este mismo componente.
Esto es lo que probé:
const Basket = ({basket}) =>{ return( <div className = "basketWrapper"> <div className = "paymentWrapper"> let currentTotal = 0; {basket.map((cat, index) => { currentTotal += Math.floor(cat.price); return( <div className = "catsIN"> <h2>Cat: {cat.name}</h2> <p>{cat.name} is: £{cat.price}</p> </div> ) }) } <div> <h4>Your total is: £{currentTotal}</h4> </div> </div> </div> ); } export default Basket;Sin embargo, cuando ejecuto esto, devuelve un error de que currentTotal no está definido. Entiendo que está fuera del alcance de las funciones del mapa, pero no estoy seguro de cómo lograrlo en este momento. Acabo de trabajar con reaccionar por un corto tiempo.
Cualquier código que desee ejecutar como parte de su JSX debe estar en {} y let currentTotal = 0; no es parte de una sección de código.
Deberías calcularlo antes, así:
const Basket = ({basket}) =>{ const total = basket.reduce((prev, cur) => prev + cur.price, 0); return( <div className = "basketWrapper"> <div className = "paymentWrapper"> {basket.map((cat, index) => { currentTotal += Math.floor(cat.price); return( <div className = "catsIN"> <h2>Cat: {cat.name}</h2> <p>{cat.name} is: £{cat.price}</p> </div> ) })} <div> <h4>Your total is: £{total}</h4> </div> </div> </div> ); } export default Basket;Su código nunca establece realmente la variable currentTotal como está en su dom.
Además, usaría la función de reduce para calcular el precio total, aquí están los cambios en el código para que presumiblemente funcione.
const Basket = ({basket}) =>{ let currentTotal = basket.reduce((c, t) => Math.floor(c.price) + t, 0 ); return( <div className = "basketWrapper"> <div className = "paymentWrapper"> {basket.map((cat, index) => { return( <div className = "catsIN"> <h2>Cat: {cat.name}</h2> <p>{cat.name} is: £{cat.price}</p> </div> ) }) } <div> <h4>Your total is: £{currentTotal}</h4> </div> </div> </div> ); } export default Basket;