カリー化を使ったイベントハンドラー関数

 export default function App() {
   const items = [{ id: 1, val: 'A' }, { id: 2, val: 'B' }, { id: 3, val: 'C' }];
   const handleClick = (item) => (e) => {
     console.log(item.val);
   }
   return (
     <div>
       {items.map((item) => {
         return (<div><button onClick={handleClick(item)}>ID: {item.id}</button></div>);
       })}
 
     </div>
   );
 }

カリー化された関数

 const handleClick = (item) => (e) => {
   console.log(item.val);
 }

🡇🡇🡇

 function handleClick(item) {
    return function (e) => {
        console.log(item.val);
    }
 }

参考

https://codesandbox.io/s/react-event-handlers-of-currying-functions-yox18l