Как суммировать цены товаров в корзине, когда пользователь выбирает их в ответ?

Question

Я пытаюсь создать корзину для покупок с reactjs.До сих пор я получал свои данные от json и отображал их как элементы корзины, данные - это имя, цена и выдержка из элементов.

Теперь я хочу создать компонент счета, который будет действовать следующим образом: когда пользователь нажимает наединица товара - цена товара и других предметов, на которые нажал пользователь, и при первом щелчке на предмете его название и общее количество цен появятся в разделе счета.

На данный момент это мой компонент тележки.:

import React, { Component } from "react";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import { Link } from "react-router-dom";

class Food extends Component {
  constructor(props) {
    super(props);
    this.state = {
      total: [[]]
    };
  }

  render() {
    if (this.props.product !== undefined) {
      var items = this.props.product.map(index => {
        let grid = 12 / this.props.product.length;
        let menu_item_href = "/menu-item";

        return (
          <Grid item xs={grid} key={index.ProductID}>
            <Paper className="food-item">
              <div>
                <h3>{index.Name}</h3>
                <p>Excerpt: {index.Excerpt}</p>
                <p>price: {index.Price}</p>
                <div onClick={this.sum}>sum</div>
                <Link to={menu_item_href}>
                  <p>more...</p>
                </Link>
              </div>
            </Paper>
          </Grid>
        );
      });
    }
    return (
      <div>
        <h2>{this.props.cat}</h2>
        <Grid container spacing={24}>
          {items}
        </Grid>
        {this.state.total}
      </div>
    );
  }
}
export default Food;