Reactのコンポーネントに引数付きの関数を渡したら思ってたのと違う挙動になった

こんにちは！
普段Webアプリの開発を行っているn-kokiと申します。

タイトルの通り、Reactのコンポーネントにpropsで引数付きの関数を渡したら、思っていたのと違う挙動をしたので、その内容と解決策について紹介します。

何がしたかったのか

Reactのpropsで変数の他に、関数も渡すことができることは、多くの方がご存じかと思います。私はこれを使って、ボタンのコンポーネントに対してonClickで発火する関数を渡そうとしました。引数の無い関数では思い通りに動くのですが、引数をつけるとボタンを押さずともページが読み込まれた瞬間に実行されていしました...

App.js

import Button from './Button'

function App() {
  const func1 = () => {
    alert("ボタンが押されたよ！")
  }

  const func2 = ( data ) => {
    alert("ボタンが押されたよ！\n" + data + "っていうデータも受け取ったよ！" )
  }

  return (
    <div className="App">
      {/* ↓ 動画では使わない方にコメントをしています。 */}
      <Button func={ func1 }></Button>
      <Button func={ func2("data") }></Button>
      <a href="">
        <button className="button">リロード</button>
      </a>
    </div>
  )
}

export default App

Button.jsx

const Button = ( props ) => {
  return (
    <button className="button" onClick={ props.func }>ボタンを押してね！</button>
  )
}

export default Button

引数なしの場合(思い通りにいった)

動画のように引数なしの場合は、リロードしても特に何も起こらず、左のボタンを押すと関数が実行されます。

引数ありの場合(思い通りにいかなかった...)

動画のように引数をつけると、リロードしたときに関数が実行されます。さらに、左のボタンを押しても何も反応しません。

解決策

App.jsとButton.jsxの内容をそれぞれ少し変更します。

まずApp.jsのほうでは、引数にした値を別のpropsとしてコンポーネントに渡します。

App.js

- <Button func={ func2("data") }></Button>
+ <Button data="data" func={ func2 }></Button>

Button.jsxの方では、onClick内の関数の呼び出し方を以下のように変更します。

Button.jsx

- <button className="button" onClick={ props.func }>ボタンを押してね！</button>
+ <button className="button" onClick={ () => props.func(props.data) }>ボタンを押してね！</button>

できた！

無事、引数付きの関数を実行することができました！

ではまた。