REACT NATIVEの条件付きレンダリングで複数のMAP処理を処理した結果を利用して表示する方法

2021.11.28

このメモは、React Nativeで二つのリストをMAPで二重に回して何らかの条件が一致したときだけレンダリングする場合の方法についてです。ちょっとははまったのでメモを残します。

以下のイメージでMAPを二重に回して条件が一致したときだけレンダリングするような場合には、keyの処理の問題などいろいろ悩みどころです。

      {members.map((member, indexMember) => {
            reviews.map((review, indexReview) => {
               member.userId === review.userId ? 
                  <View>....</View> :
                  <View>.....</View>
            })
      })}

こういった場合のサンプルを以下に紹介します。

とりあえず動きますのであとは適宜お好みで。

export const ShowPanel = memo((members, reviews) => {
  return (
    <View>
      {members.map((member, indexMember) => {
        return (
          <View key={indexMember}>
            {reviews.map((review, indexReview) => {
              if (review.userId === member.userId)
                return (
                  <View key={indexReview}>
                    <Text>{member.userId}</Text>
                  </View>
                );
            })}
          </View>
        );
      })}
    </View>
  )
});

なお、レンダリング要素がたくさんある場合はではなく使いたくなりますが、この場合は二重MAPのところを事前に回してレンダリング用のリストを作ってから、フラットリストにいれた方が簡単に処理できるかと思います。