Reactのコンポーネントに関数を渡す

こんにちは！学生開発チームNineteenの代表をしている古谷洸樹です！
今日はReactのコンポーネントに（onClickとか）関数を渡す方法を記事にしていきたいと思います。

やろうとしていること

アクセストークンが発行できるように関数を作ったがそれをログインボタンに適用したいと思いました。

問題点

新しい関数に引数を渡そうとすると関数がうまく動作しない。

アクセストークンを引っ張ってくる関数

うまく動作しないコード

うまくいかない画面

ログインボタンを押してもコードは実行されず、なぜかリロード時に関数が2回走る。

改善点

結果としてアロー関数をonClickの中に記述することでうまく動作しました。

レンダー内でアロー関数を使用

おわりに

今回はReactのコンポーネントの中で関数を扱う方法について記事にしてみました。しかし、実はこの方法だとコンポーネントがレンダーされるたびに新しい関数ができ、パフォーマンス上はあまりよくないようです。そのことについてはまた記事にしてみようと思います。

もしよければスキやコメントよろしくお願いします。

参考資料

コンポーネントに関数を渡す – React