How do i iterate over an array of object in react.js and add the values of prices in the object as s-CodePudding

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?

CodePudding user response：

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>
 }

CodePudding user response：

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>
    )
}

CodePudding user response：

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>

CodePudding user response：

Do this:

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;
  for (const i of data) {
    sum = sum   i.id;
}


const Test = ()=> {
   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>
   )
}