[React]ボタンコンポーネントのpropsに関数の返り値を渡したい

Question

前提・実現したいこと

ボタンコンポーネントのpropsに関数の返り値を渡すようにしたいのですが、うまく行きません。
関数を使わない場合にはうまく行けるのですが、関数を使う場合にはどのように書く必要があるのでしょうか。
わかる方がいましたらコメントお願いします。

該当のソースコード

function selectBG(value) {
    return selectedButton[value] ? "#3d4546" : "#dde3e3";
  }

//コンポーネントのprops
<Button
  bg={() => selectBG(value)}　//失敗
  // bg={selectedButton[value] ? "#3d4546" : "#dde3e3"} //成功

Answer 1

関数を使わない場合にはうまく行けるのですが、関数を使う場合にはどのように書く必要があるのでしょうか。

以下の部分、通り定義をしているだけで実行していないので実行しましょう。

//コンポーネントのprops
<Button
  bg={() => selectBG(value)}　//失敗
  // bg={selectedButton[value] ? "#3d4546" : "#dde3e3"} //成功

つまり

() => selectBG(value)
の個所を
(() => selectBG(value))()
にする

書き直すと

<Button bg={ 
  (() => selectBG(value) )()
  }
/>

Answer 2

成功例から察するに、bgは文字列型なのですよね？
それなら

const bg = selectBG(value);

// ...略

<Button bg={bg}　/>

もしくは

<Button bg={selectBG(value)}　/>

でいいのではないでしょうか？

Comments

[aiai8976]

functionだと返り値は何型になるのでしょうか？

[nekoniki]

返り値というより、質問文中の書き方だとbgに関数型を渡してしまっています。

[aiai8976]

functionだとreturnで文字列が返ってこないのですか？

[nekoniki]

実行すれば文字列が返ってきますが、質問文中では実行せずに関数そのものを渡しています。
"() => selectBG(value)"
は「実行したら"selectBG(value)"の結果を返してくれる無名関数そのもの」であって、その実行結果を渡しているわけではありません。
もし、そのようにして書きたい場合は無名関数を実行する必要があります。
"() => selectBG(value)"ではなく
"(() => selectBG(value))()"を渡せば期待した結果になると思います。