onClickイベントで引数を受け取る関数を作成する方法

削除ボタンを押した時にユニークなIDを引数として、デリートイベントを実行する簡単な処理。

最初の記述

<button onClick={() => deleteFirebaseData(result.id)}>
  削除
</button>

このように記述していた。
mapで展開したidを引数で受け取る関数を全ての数分生成していることになる。

出来るだけJSX内の記述量は減らしたいという目的でこの関数は外で定義したい。

そこでhandleDeleteという関数を用意することにしたが、引数を渡すにはどうしたらいいのだろう？という疑問が浮かんだ。TypeScriptの型推論を見ると

MouseEventHandler<T = Element> = (event: MouseEvent<T, globalThis.MouseEvent>) => void

このように推論されている。
確かに

const handle = (e) =>　e.preventDefault()

こんな感じでeという引数が存在していたなと思いだす。

どうすればいいの？

結論、要素のidとしてmapで展開したidを付与してeventに含まれるそのidを引数として渡す方法をとる。

 const handleDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
    deleteFirebaseData(e.currentTarget.id);
  };

　//途中省略

 <button onClick={handleDelete} id={result.id}>
  削除
 </button>

event.currentTargetでそのeventが発生した要素を参照できるよう。
そのことを利用している。

またこうすることで関数を都度生成することが無くなったので、パフォーマンス的にも向上するかもしれない。
クリックイベントの型定義は面倒だったり難しかったりするけれどこういった新たな発見もあるので理解しながらやってみるという事はとても大事。