Accepted answer

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>


const Test = ()=> {
    var prices ={price})=> price).reduce((a, b)=> a+b, 0);

thank you everyone, I also tried this and it worked. enter code here


Please refer this code, it may help your code

const Test = () => {
    let sum = 0;
    data.forEach((item) => {
     sum = sum + item.price;

     <div> {sum} </div>


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>

Related Query

More Query from same tag