React入門 練習問題 20：イベントハンドラ：引数の受け渡し方法
Reactでボタンクリック時にhandleDelete関数へ引数idを渡したい場合、正しい記述方法はどれか。
- <button onClick={() => handleDelete(id)}>削除</button>
- <button onClick={handleDelete(id)}>削除</button>
- <button onClick={handleDelete}>削除(id)</button>
- <button onClick=handleDelete(id)>削除</button>
- <button click={() => handleDelete(id)}>削除</button>
Qraftユーザーの成績：難易度 Bランク（レーティング1234）・正答率 43%（6/14回正解）
レーティングは解いた人の実力と正誤から算出する難しさ（初期値1200）。ランクはその全問題中の順位（S+が最難関、F-が最易）
正解と解説を見る
正解：<button onClick={() => handleDelete(id)}>削除</button>
onClickに関数呼び出しの結果ではなく関数そのものを渡す必要があるため、アロー関数で包んでクリック時に初めてhandleDelete(id)が実行されるようにする書き方が正しい。
【正解の理由】
onClickにはイベント発生時に実行される「関数」を渡す必要がある。アロー関数`() => handleDelete(id)`はクリックされるまでhandleDeleteを実行しないため、この記法によって初めてidを伴った呼び出しがクリック時に行われる。
【不正解の理由】
• 「onClick={handleDelete(id)}」：JSXの評価時（レンダリング時）に即座にhandleDelete(id)が実行されてしまい、クリックを待たずに呼び出される
• 「onClick={handleDelete}」で「削除(id)」：idはボタンの表示テキストとして扱われるだけで、handleDeleteには渡らない
• 「onClick=handleDelete(id)」：波括弧がなくJSXの式埋め込み構文として成立しておらず、構文エラーになる
• 「click={() => handleDelete(id)}」：React要素にはclickという属性は存在せず、onClickという名前を使う必要がある