イベントハンドラーを追加し状態を更新する

アプリケーション (App) のコアコンポーネントに状態を格納すると、重要なすべてのプロパティの現在値を読み取ることができます。各コンポーネントを操作する必要はありません。イベントも一元化し、1 つの場所でのみデータが変更されるようにできます。

シナリオ

アプリケーションのユーザーが、食材一覧のアイテムを完了したらそれをタップできるようにしたいと考えています。アイテムの状態は、prepared とマークします。この設定は、アプリケーション全体に反映されます。値が変わると、コンポーネントがその更新を検出し、必要に応じて再評価を実行します。

App.jsx ファイルを開きます。
ingredientClick という名前のイベントリスナーを作成します。それを TODO: Create ingredientClick event listener というコメントの下に追加します。
```
function ingredientClick(index) {
    const updatedRecipe = { ... recipe };
    updatedRecipe.ingredients[index].prepared = !updatedRecipe.ingredients[index].prepared;
    setRecipe(updatedRecipe);
}
```
このロジックは、スプレッド演算子を使用して recipe のコピーを作成するところから開始します。次に、index を使用して、更新された ingredient を取得します。 prepared の値を逆にします。最後に、setRecipe を使用して、状態の recipe オブジェクトを置き換えます。
レシピの食材を表示するコンポーネントである IngredientList を追加します。これは、TODO: Pass ingredients and event listener to IngredientList のコメントの後に、次のコードを追加して行います。
```
<IngredientList ingredients={recipe.ingredients} onClick={ ingredientClick } />
```
他の prop をコンポーネントに渡すのと同様に、ingredientClick 関数を渡すことができることに着目してください。

React のプロパティ (または prop) には、関数を含むすべての JavaScript 型を使用できます。したがって、イベントハンドラーを prop に設定できます。この設定により、イベントの処理を一元化できます。

では、IngredientList を更新して、前の手順で作成した ingredientClick 関数を使用してみましょう。

IngredientList.jsx ファイルを開きます。コンポーネントが既にあることに着目してください。このコンポーネントを使用して、イベントの使用方法を示します。
TODO: Add onClick event コメントの下に、次の JSX を追加します。
```
onClick={ () => props.onClick(index) }
```
prop onClick 関数にパラメーターを渡すことができることに着目してください。

Note

コンポーネントの props に、onClick の名前を使用したことに特に理由はありません。単にこの名前を選択しただけです。これが、前に App.jsx ファイルから渡されました。