Functions are not valid as a React child. ～<Component /> from render.が出て解決できません。

Question

ブラウザにHello, Reactと条件文で表示するだけのコードを書いたのですが、

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.

というエラーが出て、ブラウザに何も表示されません。原因がわからなくて困っています。

Hello.jsx

import React from 'react'

const Hello = () => {
    const isReact = true;
    return (
        <p>
            {(() => {
                if (isReact) {
                    return "Hello React";
                } else {
                    return "Hello World";
                }
            })}
        </p>
    )
}

export default Hello

App.jsx

import './App.css'
import Hello from './Hello'

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  )
}

export default App

詳しい方ぜひ原因を教えてください。

Comments

[hoshi-takanori]

{} の中身が関数だからでは。() をつけて実行してみては？

[kalon]

Hello.jsx内の{}に()を入力しましたが、同じエラーが出ます。

[hoshi-takanori]

})} を })()} にしたら動きましたけど…。
https://qiita.com/endam/items/1bde821c4b29f9b663da#jsx%E5%86%85%E3%81%A7ifelse%E6%96%87%E3%81%AE%E5%88%A4%E5%AE%9A%E3%82%84%E3%83%AB%E3%83%BC%E3%83%97%E3%82%92%E8%A1%8C%E3%81%86

[kalon]

そんな書き方があったのですね。教えてくだっさってありがとうございます。

Answer 1

            {(() => {
                if (isReact) {
                    return "Hello React";
                } else {
                    return "Hello World";
                }
            })}

JSXの途中に書けるものは値であって、（通常の場合）関数は入れられません。JSXの途中で分岐させたい場合は、三項演算子の? :を使いましょう。

Comments

[kalon]

そうなんですね。ご回答ありがとうございます！

[kalon]

三項演算子にしたところちゃんと動きました。