onClickのイベント内の関数に引数を渡したい

概要

onClickなどのイベント内の関数に引数を渡したかったので、その失敗内容と解決策を記載します。

失敗内容

onClick内の handleDeleteに indexを渡したかったが失敗

{tasks.map((task, index) => (
    <li key={`${task}${index}`}>
        {task} <button onClick={handleDelete(index)}>Delete</button>
    </li>
))}

いつものお作法にプラスしてカッコをつけて渡せばいいのかなぁと思って試しましたがダメでした。

解決策

onClick内にアロー関数を作ることで indexを渡せた

{tasks.map((task, index) => (
    <li key={`${task}${index}`}>
        {task} <button onClick={() => handleDelete(index)}>Delete</button>
    </li>
))}

終わりに

全然関係ないですが、イベントとか引数とか関数とか、それが何なのか言葉で説明できることも、コードの理解を深める一因になるのかなと感じました