I have a component in React that recieves a cat array containing multiple objects. In each of these objects, there is a .price attribute.
What I'm hoping to do is total all of these prices up and print them once within this same component.
Here's what I tried:
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;
However, when I run this, it returns an error that currentTotal is not defined. I get that it's outside of the map functions scope, but Im not sure how to achieve this at the moment. Just been working with react for a short while.
Any code that you want to execute as part of your JSX should be in {} and the let currentTotal = 0; is not part of a code section.
You should calculate it before, like this:
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;
Your code is never actually setting the currentTotal variable as it is in your dom.
Also, I would use the reduce function to tally up the total price, here are the changes to the code to presumably make it work.
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;