はじめに

元記事 : 【 React Hooks 入門】useState を使って買い物リストを作るチュートリアル

がやっと動いたので載せて置きます。

Todoリストと似ているけど、それぞれに数量があって、合計が表示されるのをhookでどうやるのかなぁ、と思っていました。普通にuseStateで書き換えていました。(追記: useEffectを使う方式に書き換えました。)

このチュートリアルもそうですがHooksが現れてからComponentもclassも使わずにまるでElmの様に書くのが普通になりつつある。Reduxも使わない。良いことだと思います。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

元記事はfontawesomeを多用していたのをfontawesomeを使わない形にしました。
済にするのをcheckboxを使う形に変えました。
autofocusを足した。
formを使う形にしてenterでsubmitになるようにした。

当初動かなかったのはItemの型が決まっていなかったからのようで

  const [items, setItems] = useState<Item[]>([]);

  type Item = {
    itemName: string,
    quantity: number,
    isSelected: boolean,
  };

としました。

id が無いのでワーニングが出ますがとりあえず動いたのでこのままにします。

totalの書き換えが元記事ではuseStateだけで書き換えていますが、新たなitemが生じた時にもcalculateTotalが発火するようにuseEffectにしないと駄目だと思います。