title: Displaying the Sum of values in React JSX
body: <p>Im trying to add up all of the calories in my array thats stored in the state. </p>
  
  <pre><code>  id: shortid.generate(),
    text: this.state.text,
    calorie: this.state.calorie
  </code></pre>
  
  <p>This is the data structure that being stored in the state array meals </p>
  
  <p>Im currently running a forEach and using reducer to add up the values but its saying "reduce" is not a function I'm not sure what i'm doing wrong. </p>
  
  <pre><code>     class App extends Component {
    state = {
      meals: []
    };
  
    addMeal = meal =&gt; {
      this.setState({
        meals: [meal, ...this.state.meals]
      });
    };
  
    onDelete = id =&gt; {
      this.setState({
        meals: this.state.meals.filter(meal =&gt; meal.id !== id)
      });
    };
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="jumbotron"&gt;
            &lt;h2&gt;Calorie Counter&lt;/h2&gt;
            &lt;hr /&gt;
            &lt;Form onsubmit={this.addMeal} /&gt;
            &lt;table className="table table-striped"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Meal&lt;/th&gt;
                  &lt;th&gt;Calories&lt;/th&gt;
                  &lt;th /&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {this.state.meals.map(meal =&gt; (
                  &lt;Meal
                    key={meal.id}
                    meal={meal}
                    onDelete={() =&gt; this.onDelete(meal.id)}
                  /&gt;
                ))}
                &lt;tr&gt;
                  &lt;td&gt;Total:&lt;/td&gt;
                  &lt;td&gt;
                    {this.state.meals.forEach(meal =&gt;
                      meal.reduce(function(y, x) {
                        return y + x;
                      }, 0)
                    )}
                  &lt;/td&gt;
                  &lt;td /&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Im trying to display the total of calories inside of the meal in jsx  </p>