Like button logic inside the render method of Zopher

LikeButtonComponent.js

<ScrollView contentContainerStyle={styles.container}>
  <View style={{flex: 1, alignItems: 'center'}}>          
    {
      this.state.posts.map((post, index) => (
        <Card key={index} style={styles.cardStyle}>
          {/* Post body */}
          <Text style={styles.postBody}>
            {post.postContent}
          </Text>                                    
          <Text style={styles.postUsername}>
            {post.postOwnerUsername}
          </Text>
          {/* Like button functionality */}
          <View style={styles.cardFooterStyle}>
            {/* Logged in user liked this post */}
            {
              post.likes.items.length !== 0 &&
              post.likes.items.filter(
                obj => obj.likeOwnerId === loggedInUser
              ).length === 1 &&
              <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableOpacity
                  onPress={() => this.toggleLikePost(post)}>
                  <Icon
                    name='md-heart'
                    style={{ fontSize: 55, color: '#fb7777' }}
                  />
                </TouchableOpacity>
              </View>       
            }
            {/* Logged in user did not like this post */}
            {
              post.likes.items.length !== 0 && 
              post.likes.items.filter(
                obj => obj.likeOwnerId === loggedInUser
              ).length === 0 &&
              <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableOpacity
                  onPress={() => this.toggleLikePost(post)}>
                  <Icon
                    name='md-heart'
                    style={{ fontSize: 55, color: '#69ff' }}
                  />
                </TouchableOpacity>
              </View>              
            }
            {/* Post has no likes yet */}
            {
              post.likes.items.length === 0 && 
              <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
                <TouchableOpacity
                  onPress={() => this.toggleLikePost(post)}>
                  <Icon
                    name='md-heart'
                    style={{ fontSize: 55, color: '#69ff' }}
                  />
                </TouchableOpacity>
              </View>                  
            }
            {/* Show delete Icon if logged in user is the post owner */}
            { post.postOwnerId === loggedInUser &&
              <Icon
                name='ios-trash' 
                onPress={() => this.deletePostAlert(post)}
              />
            }  
          </View>      
        </Card>
      ))
    }
  </View>     
</ScrollView>