You can use the reduce :

data.reduce((a,v) =>  a = a + v.prix , 0 )

const data = [
  {title : "One",prix:100},
  {title : "Two",prix:200},
  {title : "Three",prix:300}
]

console.log((data.reduce((a,v) =>  a = a + v.prix , 0 )))

I think that here you are missing a concept of React. You should keep your state high in your hierarchy of components if you need it below.

In this example, you have something in a component Main that you need in a sibling component Header. This means that you should have a parent component that pass this information down to them.

For instance, you can have an App component which somehow takes the JSON and keep it into his state alongside other product information:

// App.js
import React, { Component } from 'react'
import PRODUCTS from '../plist.json'

class App extends Component {

  state = {
    // here we are preparing the state copying all the
    // information of a product plus a quantity property set to 0
    products: PRODUCTS.map(p => ({ ...p, quantity: 0 }))
  }

  render() {
    return (
      <>
        {/* here we should render the two components who needs data */}
        <Footer />
      </>
    )
  }

}

In the render method we can render the three initial components but with some changes...

First, the Header requires the total quantity and the total price. One of React best practices tells us that everything that can be computed from the state, should be outside of it. In this case, we don't need to save these two quantities in the state, because we can easily compute them:

// in App class definition

...

totalQuantity = () =>
  this.state.products.reduce(
    (sum, product) => sum + product.quantity,
    0
  )

totalPrice = () =>
  this.state.products.reduce(
    (sum, product) => sum + product.quantity * product.price,
    0
  )

...

Being able to compute those values, we add the rendering of the Header component to the render method of App:

// in App class definition

...

render() {
  return (
    <>
      <Header quantity={ this.totalQuantity() } 
              price={ this.totalPrice() }
      />
      {/* here we should render the Main component */}
      <Footer />
    </>
  )
}

...

Of course you'll have to change the way you render these values in the Header component:

// Header component, render() method
// remember to apply some formatting for currency etc.
<span className={ this.getClass() }>
  Total Quantity: { this.props.quantity }
  Total Price: { this.props.price } 
</span>

Now, let's rethink a bit the Main component. It does two things:

• render the products list;
• handle increment/decrement of quantities;

Let's add Main to the render method and then work on these features:

// in App class definition

...

render() {
  return (
    <>
      <Header quantity={ this.totalQuantity() } 
              price={ this.totalPrice() }
      />
      <Main products={ this.state.products }
            onIncrement={ this.handleIncrement }
            onDecrement={ this.handleDecrement }
      />
      {/* here we should render the Footer component */}
    </>
  )
}

...

In the Main component we need to change the way we render the products because we don't read the JSON anymore, but we can use the data provided by App. In addition, we need to be able to pass increment and decrement events:

// Main

...

render() { return ( { this.props.products.map( (product, index) => this.props.onIncrement(index) } onDecrement={ () => this.props.onDecrement(index) } /> ) } ) }

...

Down in the Product component, we now don't need internal state anymore, because everything we need is provided as props, so it can be a stateless component:

const Product = ({
  image, 
  url, 
  name, 
  price, 
  description, 
  onIncrement, 
  quantity,
  onDecrement
}) => (
  <div className="col-md-4 ml-auto">
    <img className="productpic" 
         src={ require(`./images/${image}`) }
         alt="Product"
    />
    <h2 className="display-6">
      <a href="{url}">
        { name }
      </a>
    </h2>
    <p className="h5 price">
      { price }
    </p>
    <p className="info">
      { description }
    </p>
    <div className="counter">
      <button className="btn btn-info"
              onClick={ onIncrement }>
        +
      </button>
      <div className="count">
        { quantity }
      </div>
      <button className="btn btn-info"
              onClick={ onDecrement }>
        -
      </button>
    </div>
  </div>
)

To complete this behaviour, we need to handle the increment and decrement in the App component, in order to update the state and propagate updated information to Header (quantity and total) and Main.

// in App

...

handleIncrement = index =>
  this.setState(prevState => ({
    products: [
       ...prevState.products,
       [index]: {
          ...prevState.products[index],
          quantity: prevState.products[index].quantity + 1
       }
    ]
  }))

handleDecrement = index =>
  this.setState(prevState => ({
    products: [
       ...prevState.products,
       [index]: {
          ...prevState.products[index],
          quantity: prevState.products[index].quantity - 1
       }
    ]
  }))

...

We're almost done, in your index.js, render just the App component:

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/app";
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';


ReactDOM.render(<App />, document.getElementById("root"));

you can split the value with "," and and find the sum of the array:

export default function App() {
const [first, setfirst] = useState(0)

const addChange=(e)=>{
    const sumArr = e.target.value.split(",");
    const sum = sumArr.reduce(function(a, b){
      return parseInt(a) + parseInt(b);
    }, 0);
    if(sum) {
      setfirst(sum);
    }
  }

  return (
    <div className="App">
      <>
    <label>Sum of inputs:{first} <input type="text" onChange={addChange}></input></label>
    </>
    </div>
  );
}

codesandbox

I would get the sum using reduce:

const SumValue = this.state.value && this.state.value.reduce((a, v) => a + v, 0)

Reduce is an array function, not a meal object function. Try replacing the forEach with the reduce.

meals.reduce((totalCalories, meal) => totalCalories + meal.calorie, 0)

The first reduce assumes calories are numbers, the second is if strings

const meals = [
  { calorie: 10},
  { calorie: 15},
  { calorie: 20}
];

const calorieTotal = meals.reduce((totalCalories, meal) => totalCalories + meal.calorie, 0);

console.log(calorieTotal); // 45 calories

const mealsAsStrings = [
  { calorie: '11'},
  { calorie: '12'},
  { calorie: '13'}
];

const calorieStringTotal = mealsAsStrings.reduce((totalCalories, meal) => totalCalories + parseInt(meal.calorie, 10), 0);

console.log(calorieStringTotal); // 36 calories

I think you're mistaking the use of Array.map. Array.map will create a new array and apply what is return from the call back function on each element, you can read more here. With that said, the setState in processData will basically do nothing since your data is not change and you're setting state with what you initialize the state with. To use the new map value, you can assign that to a variable or constant and use that like below:

...
const processData = () => {
    var rowWithSum = data.map((item) => {
      var currRowValues = Object.entries(item);
      var nd = currRowValues.reduce((a, [key, value]) => {
        if(key === 'sum'){
          return a
        }
        return a + value;
      }, 0);
      return {...item, sum: nd};
    });
    setData(rowWithSum);
};
...

I've also modify so that it create a new key in the object using spread operator, which you can read more on it here, and also to not accidentally add the existing sum to the next sum by check the key using Object.entries.

Use the array reduce in combinaison with Object.values

const total = Object.values(data.poDetailsList).reduce((a,b) => a + b.subTotal, 0)

You can use Javascript's reduce function. This is basically the same as @epascarello answer but in ES6 syntax.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

const arr = [{level:2},{level:4},{level:5}]; 

const total = arr.reduce((prev,next) => prev + next.level,0);

console.log(total);

I think this is what you are looking for? (I'm writing it in React, maybe it'll be similar to Next.JS)

I'm just do a little simple one, just tweak or modify it to your liking. Numeric Input Sum Calculate

So for simple, just create 2 function called changeFirstNumber, changeSecondNumber and 3 state called firstNumber, secondNumber and result

Every time we increase/decrease either first number or second number, it will count itself and the second number then we update it with setState and Result will do the sum thing.

Then we use useEffect() with 3 dependencies to check whether a state is changed/ updated, it'll re-render the page again.

Code:

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  let [firstNumber, setFirstNumber] = useState(0);
  let [secondNumber, setSecondNumber] = useState(0);
  let [result, setResult] = useState(0);

  const changeFirstNumber = (e) => {
    setFirstNumber(+e.target.value);
  };

  const changeSecondNumber = (e) => {
    setSecondNumber(+e.target.value);
  };

  useEffect(() => {
    setResult(firstNumber + secondNumber);
  }, [firstNumber, secondNumber, result]);

  return (
    <div className="App">
      First Number:{" "}
      <input
        type="number"
        value={firstNumber}
        step="any"
        onChange={(e) => changeFirstNumber(e)}
      />
      <br />
      Second Number:
      <input
        type="number"
        value={secondNumber}
        step="any"
        onChange={(e) => changeSecondNumber(e)}
      />
      <br />
      Result: {result}
    </div>
  );
}