JavaScript/React/イベント処理/カリー化を使ったイベントハンドラー関数の変更点

追加された行はこの色です。
削除された行はこの色です。
JavaScript/React/イベント処理/カリー化を使ったイベントハンドラー関数へ行く。
JavaScript/React/イベント処理/カリー化を使ったイベントハンドラー関数の差分を削除

#author("2022-10-17T21:50:05+09:00","default:ryuichi","ryuichi")
#author("2022-10-17T21:54:15+09:00","default:ryuichi","ryuichi")
* カリー化を使ったイベントハンドラー関数 [#ba1b7f45]


 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>
   );
 }

*** カリー化された関数 [#i2ae3b6f]
 const handleClick = (item) => (e) => {
   console.log(item.val);
 }

🡇🡇🡇

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

** 参考 [#zbd4e6eb]
https://codesandbox.io/s/react-event-handlers-of-currying-functions-yox18l