react native render内での分岐してのコンポーネントの表示

初歩すぎて申し訳ありません。
下記の感じで、3つの外部コンポーネントを表示していたのですが、
下記に加えて、ログイン中のみその3つのコンポーネントを表示するように作り替えたかったのですが、

  render() {
    return (
      <SafeAreaView>
        <View>
          <Text>{this.state.loggedIn ? "ログイン中です" : "ログインして下さい"}</Text>
        </View>
        {this.renderForm()}

        <List />
        <Add />
        <Delete />

      </SafeAreaView>
    )
  }

#失敗例
error:Adjacent JSX elements must be wrapped in an enclosing tag.

  render() {
    return (
      <SafeAreaView>
        <View>
          <Text>{this.state.loggedIn ? "ログイン中です" : "ログインして下さい"}</Text>
        </View>
        {this.renderForm()}

        
        {(() => {
          if (this.state.loggedIn) {
            return (
              <List />
              <Add />
              <Delete />
            )
          }
        })()}


      </SafeAreaView>
    )
  }

このような場合どう記述するのがベターでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

通常、JSX.Elementをreturnする際には、入れ子の構造になっていないといけません。

<div>で囲うことで解消することもできますが、並列にreturnしたい時もあります。その時は、React.Flagmentを使用します。

ダメな例

javascript
1<FooComponent/>
2<BarComponent/>
3<BazComponent/>

javascript
1<React.Flagment>
2  <FooComponent/>
3  <BarComponent/>
4  <BazComponent/>
5</React.Flagment>

また、React.Flagmentは<></>で省略して書くことができます。

javascript
1<>
2  <FooComponent/>
3  <BarComponent/>
4  <BazComponent/>
5</>

そもそも、return内部で
関数で返すのではなく、&&でrenderすると良いと思います。

javascript
1render() {
2    return (
3      <SafeAreaView>
4        <View>
5          <Text>{this.state.loggedIn ? "ログイン中です" : "ログインして下さい"}</Text>
6        </View>
7        {this.renderForm()}
8
9
10        {this.state.loggedIn && (
11          <>
12              <List />
13              <Add />
14              <Delete />
15           </>
16         )}
17      </SafeAreaView>
18    )
19  }