The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

arr.reduce(callback, initialValue);

reducer will only return one value and one value only hence the name reduce. Callback is a function to be run for each element in the array.

and Function arguments function(total,currentValue, index,arr):

Argument           Description

total              Required.The initialValue, or the previously returned value of the function
currentValue       Required.The value of the current element
currentIndex       Optional.The array index of the current element
arr                Optional.The array object the current element belongs to

in this example use this code:

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

const result = data.reduce((total, currentValue) => total = total + currentValue.prix,0);

console.log(result);  // 600

You can't use reduce method on array elements as it's an array method. In the example above you are looping into the array and trying to call reduce with each element of array which is not right. You can do as follows -

this.state.meals.reduce((accumulator, currentValue) => accumulator + currentValue)

Hope that helps.

UPDATE - As you are trying to calculate calories from meal object array, we can do it as follows -

this.state.meals.reduce((accumulator, currentValue)=> accumulator + accumulator, currentValue.calorie,0);

Check the link for detail use of reduce method - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Either a simple loop

var a = [{level:1},{level:2},{level:3},{level:4}],
        total = 0;
    for (var i=0; i<a.length; i++) {
        total += a[i].level;
    }
console.log('total', total)

or reduce

var a = [{level:1},{level:2},{level:3},{level:4}]
console.log(a.reduce( function(cnt,o){ return cnt + o.level; }, 0))

You need to provide an initial value for prev, as the second param of reduce. If its not provided then during the first run, first param of callback function is the first element of array and second param of callback function is the second element of array. Then the return value is passed to the first param and the next element is the second value.

So, to add I have added 0 as the initial value.

const numbers =  [ { name: 'max', num: 3 }, { name: 'jack', num: 2 } ]

const total = numbers.reduce((prev, { num }) => {
    return prev + num
}, 0)

console.log(total)

Here's my solution assuming you control data structure in App component

const Total = (props) => {
    return (
        <>
            <p>props.totalExerciseCount</p>
        </>
    )
}

const App = () => {
    const course: {
      name: "Half Stack app development",
      parts: [
        {
          title: "Fundamentals of React"
          exerciseCount: 10
        },
        {
          title: "Using props to pass data"
          exerciseCount: 7
        },
        {
          title: "State of a component"
          exerciseCount: 14
        },
      ]
    }

  let totalExerciseCount = 0;

    return (
        <div>
            <Header name={course.name} />
            {course.parts.map(part => {
                totalExerciseCount += part.exerciseCount;
                return <Content name={part.title} exercises={part.exerciseCount} />
              })
            }

            <Total exercises={totalExerciseCount} />
        </div>
    )
}