How do i iterate over an array of object in react.js and add the values of prices in the object as shown below

user_17751613 0
Viewed 402
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?

jsx reactjs javascript
4 Answers

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

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>

user_104039020

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>
    )
}
user_107168710 
const Test = ()=> {
    var prices = data.map(({price})=> price).reduce((a, b)=> a+b, 0);
    return(
     <div>
         {prices}
     </div>
    )
 }

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

user_177516130
Related