初めに
今回map関数内で<button>タグを設置して、onClickイベントでクリックしたら、関数を実行するという記述をしました。
ですがクリックしていないのに、勝手に関数が動き始めるというアクシデントが...
問題のコード
以下が勝手に動き始めたコードです。
<button onClick={onClickDelete(index)}>削除</button>
こちらはTodoアプリに埋め込まれているボタンで、削除ボタンをクリックしたらその項目(index番目)をTodoリストから削除する、という機能を持たせました。
ですが一度クリックをしたら、その後もどんどんと削除されます...
原因と解決方法
今回の原因となる部分は{onClickDelete(index)}この部分でした。
こちらの部分を{() => onClickDelete(index)}このように変更したところ、正常に動作しました。
{関数名()}としてしまうと、勝手に関数が実行されてしまうので注意が必要です。
終わりに
ボタンのクリック時に引数を持った関数を発火させる場合、自動で処理が行われるので注意が必要ですね！
ちなみに仮に引数なしの場合は{onClickDelete}で問題なく実装できそうです！