【React Native】 JSX内で三項演算子を使って「連続表示させないタグ」と「連続表示させるタグ」を包括する

はじめに

JSX内部で、

・「連続的に表示させたいタグ」と

const items = [
  {
    hoge1: "hoge1",
    hoge2: "hoge2"
  }
];

export const TestScreen = ({}) => {
  return (
    {
      items.map((item) => (
        <View>
          <Text>hoge3</Text>
        </View>
      ))
    }
  )
}

・「非連続的に表示させたいタグ」の

export const TestScreen = ({}) => {
  return (
      <View>
        <Text>item.hoge1</Text>
      </View>
  )
}

タグを共存させて、三項演算子で条件分岐させたい時とかにちょいと戸惑ったので、そのメモです。

追記で、FlatListを使用して、返却されたAPI内部の一部にある配列をFlatListで回しつつ、API内部にある一部（配列じゃない）を外だしで表示するのも追記しました。

内容

今回の例では、APIなどで抽出したデータ内部に何もなければ、「データありません」的な表示して、あるときにはタイトルにある通り「連続表示させないタグ」と「連続表示させるタグ」を共存させた表示をします。

手間なので結論を書きます。

結論

mapを使用した方法

const items = [
    {
      id: 1,
      user: 'hogeman',
      metaData: 'hogehoge'
    },
];

export const TestScreen = ({}) => {
  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      {items.length > 1 ? (
        <>
          <View>
            <View>
              <Text>hogehoge</Text>
            </View>
          </View>
          {items.map((item) => (
            <View>
              <Text>item.user</Text>
              <Text>item.metaData</Text>
            </View>
          ))}
        </>
      ) : (
        //   データが存在しない場合
        <View>
          <Text>No Data</Text>
        </View>
      )}
    </ScrollView>
  );
};

FlatListを使用した方法

renderさせたいdataの値が少し、mapの時と違いますが、簡潔に表示するために例として書いています。

const items = {
    id: 1
    user: 'testman'
    metaData: 'testtest',
    hoge: [
      {
        id: 2,
        user: 'hogeman',
        metaData: 'hogehoge'
      },
    ]
};

const TestContents = ({ item }: any) => {
  return (
    <View>
      <TouchableOpacity>
        <Avatar source={require('hoge/assets/personPicture.png')} />
        <View>
          <Text>item.user</Text>
          <Text>item.metaData</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};

const Test = ({ items }: any) => {
  return (
    <>
      <RankingContents item={items} />
      <View>
        <Text>items.user</Text>
        <Text>items.metaData</Text>
      </View>
    </>
  );
};

export const TestScreen = ({}) => {
  return (
    <>
      {items.hoge.length > 1 ? (
        <FlatList
          data={items.hoge}
          renderItem={TestContents}
          keyExtractor={(item) => item.id}
          showsVerticalScrollIndicator={false}
          ListHeaderComponent={() => <Test items={items} />}
        />
      ) : (
        //   データが存在しない場合
        <View>
          <Text>no data</Text>
        </View>
      )}
    </>
  );
};

FlatListとかだと、三項演算子を使うまでもなく空のときには「ListEmptyComponent」を使うやり方もあるみたいです。

上記の内容を少し話すと以下です。

詳細

• JSXのタグとitems配列に入ったデータとの共存で困った

export const TestScreen = ({}) => {
  return (
    <ScrollView showsVerticalScrollIndicator={false}>
      {items.length > 1 ? (
         (
          <View>
            <View>
              <Text>hogehoge</Text>
            </View>
          </View>
         ) && 
          items.map((item) => (
            <View>
              <Text>item.user</Text>
              <Text>item.metaData</Text>
            </View>
          ))
      ) : (
        //   データが存在しない場合
        <View>
          <Text>No Data</Text>
        </View>
      )}
    </ScrollView>
  );
};

上記のように、最初は「&&」を使って表示しようとしていたが、最初のデータが表示されなく、困っていた。
もしかして、表示はされているが上書きされているのかなーと試行錯誤して、結論の内容に書き換えるとうまくいった。（理由ちゃんと調べていない。。すみません。）

所感

軽く詰まった内容だったのでメモで書きました〜。