【React】JSXを使ったIF文の書き方を解説【条件付きレンダリング】

ReactでIF文を書く方法を解説

Reactでは、IF文を使った条件付きレンダリングをすることが出来ます。

これは、通常のJavaScriptと同じように、if文または条件演算子などを使用してUI を更新させることが可能です。

例えばこんな感じで、簡単ですね。

isLoggedInは、 propの値に応じて異なる結果を返してくれます。

JSXを使ったIF文の書き方を解説

JSX の中にIF文を埋め込むためには、中括弧で囲む必要があります。

中括弧で囲むことで任意の JavaScript 式を展開できます。

以下のような感じ。

jsxから関数を呼び出し、

その中にすべてのif-elseロジックを入れることでも表現が可能です。

以上です。

参考にした記事

if-else statement inside jsx: ReactJS

Conditional Rendering