合計欄付きメニュー
色々書き換えていますが、大体はドットインストールのReact入門の教材です。
それをCodepen上のReact18, TypeScript, Tailwind環境に移植して、無事動きました。
See the Pen menuTotal01 by kalz2q (@kalz2q) on CodePen.
コメント
以前から合計欄付きのサイトはコピペしたりして作ってみているのですが、どうもうまく動いた試しがなくて、例えば今回ので言えば、プラス・マイナスのボタンを押して配列（オブジェクト）を書き換えて、それがトータルの数字を変化させる発火点になる仕組みがわからなかったりして。
その辺がReactだとわかりにくいけどわかりやすい。 構造的になっている。 だからローカルで動いたものがほとんどそのままでCodepenで動くのでしょう。
今回の例ではボタンに
onClick={decrement}
と言うのがあってdecrementを起動すると、本体のpropsにあるonDecrementと同名の関数を起動する。onDecrementはpropsのmenuIdを引数としてdecrementMenuを起動し、decrementMenuはsetCountsでcountsを書き換える。 これら全体が最初のボタンのonClickで起動して状態を変化させるので、countsとtotalが同期を失う事がない。
と言うことか？
あと
これはReact-Hook-Formを使っていない。 どうもReact-Hook-Formが思ったように動いてくれないので今後使わないこととする、
