title: How to calculate sum of items and total price with React?
body: <p>I have a react app where I fetch Products details from a Json file. They are displayed properly and Increment-Decrement buttons work well. </p>
  
  <p>So in index.js three js components are called main.js , header.js ,footer.js.</p>
  
  <p>Main gets the json file create the container and row then calls 8 times(because there 8 items in Json) product.js and In Product.js all info about product and individual buttons are displayed on page. </p>
  
  <p>Here is my question: 
  What is the easiest way to get each items quantity multiply with relate price and add Total quantity and Total price in header?</p>
  
  <p>index</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Main from "./components/main";
  import Footer from "./components/footer";
  import Header from "./components/header";
  import './index.css';
  import 'bootstrap/dist/css/bootstrap.css';
  
  
  ReactDOM.render(&lt;Main /&gt;, document.getElementById("root"));
  ReactDOM.render(&lt;Header /&gt;, document.getElementById("header"));
  ReactDOM.render(&lt;Footer /&gt;, document.getElementById("footer"));
  </code></pre>
  
  <p>Header</p>
  
  <pre><code>import React, { Component } from "react";
  
  
  
  
  class header extends Component {
      state = {
          totalPrice: 200,
          totalQuantity:0
      };
      render() {
          return (
              &lt;div&gt;
                  &lt;nav className="navbar navbar-expand-lg navbar-dark bg-info"&gt;
                      &lt;a className="navbar-brand" href="#"&gt;
                          &lt;img src="./logo.png" id="logo" alt="" /&gt;
                      &lt;/a&gt;
                      &lt;button
                          className="navbar-toggler"
                          type="button"
                          data-toggle="collapse"
                          data-target="#navbarNavDropdown"
                          aria-controls="navbarNavDropdown"
                          aria-expanded="false"
                          aria-label="Toggle navigation"
                      &gt;
                          &lt;span className="navbar-toggler-icon" /&gt;
                      &lt;/button&gt;
                      &lt;div className="collapse navbar-collapse" id="navbarNavDropdown"&gt;
                          &lt;ul className="navbar-nav"&gt;
                              &lt;li className="nav-item active"&gt;
                                  &lt;a className="nav-link" href="#"&gt;
                                      Home &lt;span className="sr-only"&gt;(current)&lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li className="nav-item"&gt;
                                  &lt;a className="nav-link" href="#"&gt;
                                      Features
                  &lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li className="nav-item"&gt;
                                  &lt;a className="nav-link" href="#"&gt;
                                      Pricing
                  &lt;/a&gt;
                              &lt;/li&gt;
  
                          &lt;/ul&gt;
  
  
                      &lt;/div&gt;
                      &lt;input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"&gt;&lt;/input&gt;
                      &lt;button className="btn btn-success m-2" type="submit"&gt;Search&lt;/button&gt;
                      &lt;h2&gt;&lt;span className={this.getClass()}&gt;
                          Total Quantity:
                          Total Price: {this.formatCount()} 
                      &lt;/span&gt;&lt;/h2&gt;
  
                  &lt;/nav&gt;
              &lt;/div&gt;
          );
      }
      getClass() {
          let classes = "badge";
          classes += this.state.totalPrice === 0 ? " badge-danger" : " badge-warning";
          return classes;
      }
  
      formatCount() {
          const { totalPrice } = this.state;
          return totalPrice === 0 ? "Your Cart is Empty" : totalPrice+"€";
      }
  }
  
  export default header;
  </code></pre>
  
  <p>Main</p>
  
  <pre><code>import React, { Component } from 'react';
  import ProductInfo from '../plist.json';
  import Product from './product'
  
  
  
  class Products extends Component {
  
  
    render() {
      return (
  
          &lt;div className="container"&gt;
            &lt;div className="row "&gt;
            {ProductInfo.map(postDetail =&gt; &lt;Product {...postDetail} /&gt;)}
            &lt;/div&gt;
          &lt;/div&gt;
  
      )
    }
  }
  
  export default Products
  </code></pre>
  
  <p>Product</p>
  
  <pre><code>import React, { Component } from 'react';
  
  
  class Product extends Component {
      constructor(props) {
          super(props);
          this.state = {
              count: 0
          };
  
      }
  
  
      handleIncerement = () =&gt; {
          this.setState({
              count: this.state.count + 1
          });
  
      }
  
      handleDecrement = () =&gt; {
          if(this.state.count&lt; 1){
              this.setState({
                count:0
              });
            }else {
              this.setState({
                count: this.state.count- 1
              });
            }
      }
  
      render() {
          const { name, image, price, description } = this.props;
          let totalQuantity= 0;
          let totalPrice = 0;
          totalQuantity += this.state.count;
          totalPrice += this.state.count * {price};
          console.log("Quantity:"+ totalQuantity);
          console.log("Total Price:"+ totalPrice);
  
  
  
          return (
              &lt;div className="col-md-4 ml-auto"&gt;
                  &lt;img className="productpic" src={require(`./images/${image}`)} alt="Product" /&gt;
                  &lt;h2 className="display-6"&gt; &lt;a href="{url}"&gt;{name}&lt;/a&gt;&lt;/h2&gt;
                  &lt;p className="h5 price"&gt;{price}&lt;/p&gt;
                  &lt;p className="info"&gt;{description}&lt;/p&gt;
                  &lt;div className="counter"&gt;
                      &lt;button className="btn btn-info" onClick={this.handleIncerement}&gt;+&lt;/button&gt;
                      &lt;div className="count"&gt;{this.state.count}&lt;/div&gt;
                      &lt;button className="btn btn-info" onClick={this.handleDecrement}&gt;-&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Product
  </code></pre>