React Native Conditionally Render Part Of Item Of FlatList

Question

So im displaying posts inside a flatlist. They render fine, text of them renders, username etc. But what I also have in each post is MOOD. I would like to render that as well. And I can, each post has 1, 2, 3, 4 OR 5 saved in Firebase and I can display that too. But what I want to do is I want to render a certain icon if field value mood of documents inside collection posts is 3 and a different icon if the mood is some other value. What I tried so far:

renderIcon = async () => {
    const yolo = [];
    const snapshot = await firebase
      .firestore()
      .collection("posts")
      .get()
      .then((snapshot) => {
        snapshot.docs.forEach((doc) => {
          const { mood } = doc.data();
          yolo.push({ mood: mood });
          let result = yolo.map((a) => a.mood);
          this.setState({ mood: result });
          console.log(this.state.mood);  //this stores different moods extracted from an array of objects
          for (let i = 0; i < result.length; i++) {
            if (result[i] == 3) {
              return <MaterialCommunityIcons
                  name="emoticon-neutral"
                  size={40}
                  color="yellow"
                />;
            }
          }
        });
      });
  };

Here at the bottom of this function I call the renderIcon and I use pther parts for rendering flatlist

renderPost = (post, mood, props) => {
   
    return (
      <View>
        <View
          style={{
            backgroundColor: "#FFF",
            //borderRadius: 18,
            //borderTopWidth: 1,
            borderTopLeftRadius: 18,
            borderTopRightRadius: 18,
            borderBottomRightRadius: 18,
            //borderTopRightRadius: 18,
            //flexDirection: "row",
            //alignSelf: "flex-start",
            margin: 8,
            marginVertical: 6,
            overflow: "hidden",
            borderWidth: 4,
            borderColor: "#63003d",
            //padding: 8,
          }}
        >
          <View style={{ flexDirection: "row" }}>
            <View style={{ flex: 3.5 }}>
              <View
                style={{
                  padding: 8,
                  flexDirection: "row",
                  //justifyContent: "space-between",
                  alignItems: "center",
                }}
              >
                <Image
                  source={
                    post.avatar
                      ? { uri: post.avatar }
                      : require("../assets/tempAvatar.jpg")
                  }
                  style={styles.avatar}
                />              
              <Text style={styles.post}>{post.text}</Text>
              {/* <Image
            source={post.image && { uri: post.image }}
            source={post.image}
            style={styles.postImage}
            resizeMode="cover"
          /> */}
              <View
                adjustsFontSizeToFit={true}
                style={{
                  textAlignVertical: "center",
                  textAlign: "center",
                  alignItems: "center",
                  justifyContent: "center",

                  //overflow: "hidden",
                }}
              >    
             //HERE I CALL THE FUNCTION!!!!!!!!!!!!!!!!!!!!!
                {this.renderElement()}
              </View>
            </View>
      </View>
    );
  };

In this function renderPost I call different parts of post easily. And i can do that for mood too. But if i do post.mood it doesnt work i mean it does but I need to do Conditional rendering. If mood==3 I want one icon shown instead of 3. Any help?

Answer 1

I got it to work by using multiple ternary operation. This is all thats needed, no changes are needed inside flatlist or anywhere. Simply where u call something from ur firebase or any variable, so lets say post.mood ,u cna do this:

<Text>
                  {post.mood == 3 ? (
                    <MaterialCommunityIcons
                      name="emoticon-neutral"
                      size={40}
                      color="yellow"
                    />
                  ) : post.mood == 1 ? (
                    <MaterialCommunityIcons
                      name="emoticon-excited"
                      size={40}
                      color="green"
                      onPress={() => this.setState({ mood: 1 })}
                    />
                  ) : post.mood == 2 ? (
                    <MaterialCommunityIcons
                      name="emoticon-happy"
                      size={40}
                      color="#90EE90"
                      onPress={() => this.setState({ mood: 2 })}
                    />
                  ) : post.mood == 4 ? (
                    <MaterialCommunityIcons
                      name="emoticon-sad"
                      size={40}
                      color="orange"
                      onPress={() => this.setState({ mood: 4 })}
                    />
                  ) : (
                    <MaterialCommunityIcons
                      name="emoticon-cry"
                      size={40}
                      color="red"
                      onPress={() => this.setState({ mood: 5 })}
                    />
                  )}
                </Text>