React 商品の小計をmapループから取得できない

Question

ショッピングカートにある商品の一覧表を表示するため、Reactの関数型コンポーネントをつかってみました。

商品（item）の価格(item#price)の合計も同時に取得したいので、
mapでItemsをループで表示し、関数で合計値を計算するようにしました。

最初は逐一stateにいれていくようにしたのですが、reactの非同期処理をmap内で扱うとエラーがでました。
ググってみるとまずは同期処理で小計を得てその後にstateにいれるとよいとありました。

以下のようにしましたが、途中まできちんと合計されていくのですが、ループ終了後値をみると0になっています。
スコープの問題なのでしょうか、ではどこでこの値を取得すればよいのでしょうか。

function ItemsList(props) {
  let subtotal = 0

  function updateSubtotal(price) {
    subtotal += price
    return subtotal
  }
  return (
    <React.Fragment>
      {items.map(item => {
         return <Item
            key={item.id}
            updateSubtotal={updateSubtotal}
          />;
      })}
      {subtotal} // 0と表示されてしまう。
      {updateSubtotal} // 当然ですがこれも0と表示されてしまう。

    </React.Fragment>
  );
}


function Item(props) {
  const {updateSubtotal} = props
  return (
    <React.Fragment>
      <tr>
        <td className="text-center">{item.name}</td>
        <td className="text-center">{updateSubtotal(item.price) } 円</td>
      </tr>
    </React.Fragment>
  )
}

ご教示いただけませんでしょうか。
何卒よろしくお願いいたします。

Answer 1

教本通りにmapだといろいろとやりにくいので、forEachを使って各要素を変数に入れ込む方法をとってみました。
以下のようにして、subtotal、elementsをそれぞれ返せばよいようです。

const ItemsList = () => {
  let elements = [], subtotal = 0
  items.forEach(item => {
    price = item.price
    subtotal += parseInt(price)
      elements.push(<Item
      key={item.id}
      price={price}
    />)
  })
  console.log(subtotal)
  return elements
}