const data = [
{
id: 1,
title: "buttermilk pancakes",
category: "fullstack",
price: 15.99,
img: "./img/item-1.jpeg",
desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
},
{
id: 2,
title: "diner double",
category: "backend",
price: 13.99,
img: "./img/item-2.jpeg",
desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
},
];
export default data;
Here i looped through the object using map but the returned result displays the iterated price sums. I also used the JavaScript function reduce and that did not work either.
const Test = () => {
let sum = 0;
return (
<div>
{data.map((items) => {
const values = items.price;
sum = values + sum;
console.log(Math.max(sum));
const { id } = items;
return (
<div key={id}>
<p>{sum}</p>
</div>
);
})}
</div>
);
};
How do I get the total value of the price using react?
You can use reduce function to achieve this
data.reduce((sum, p)=> sum+p.price, 0);
You can use it inside your component
const Test = ()=> {
return <div>{data.reduce((sum, p)=> sum+p.price, 0);}</div>
}
You can simply achieve the calculation of total price using forEach instead of map (as map has its own use case like creating new array, and forEach is available for us just for this simple iteration like in your use case) with a one-liner like:
const data = [{
id: 1,
title: 'buttermilk pancakes',
category: 'fullstack',
price: 15.99,
img: './img/item-1.jpeg',
desc: `I'm baby woke mlkshk wolf bitters live-edge blue bottle, hammock freegan copper mug whatever cold-pressed `,
},
{
id: 2,
title: 'diner double',
category: 'backend',
price: 13.99,
img: './img/item-2.jpeg',
desc: `vaporware iPhone mumblecore selvage raw denim slow-carb leggings gochujang helvetica man braid jianbing. Marfa thundercats `,
}
];
var sum = 0;
data.forEach(subData => sum += subData.price);
console.log(sum) // return this `sum` value alone in your div tag below.
//return <div>{sum}</div>Please refer this code, it may help your code
const Test = () => {
let sum = 0;
data.forEach((item) => {
sum = sum + item.price;
});
return(
<div> {sum} </div>
)
}