useState フックでデータを更新する Provider と Consumer を実装する

この記事では「React Context API を使う簡単な例」から「useState フックを用いてステートにデータを置く」にかけて作ったプログラムを変更して、 ステートに保存したデータを更新可能にします。 このプログラムは、リスト内のアイテムをクリックすると削除でき、Add ボタンをクリックすると Fruit 番号 というアイテムが追加されるという動きとします。 Provider に state 更新用のメソッドを渡す 前回の記事「useState フックを用いてステートにデータを置く」では、useState フックを用いて state にデータをセットしました。 これを発展させて、データを更新できるようにしましょう。 FruitContext.jsを次のように変更します。 import React, { createContext, useState } from 'react';