title: React Native Conditionally Render Part Of Item Of FlatList
body: <p>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:</p>
  <pre><code>renderIcon = async () =&gt; {
      const yolo = [];
      const snapshot = await firebase
        .firestore()
        .collection(&quot;posts&quot;)
        .get()
        .then((snapshot) =&gt; {
          snapshot.docs.forEach((doc) =&gt; {
            const { mood } = doc.data();
            yolo.push({ mood: mood });
            let result = yolo.map((a) =&gt; 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 &lt; result.length; i++) {
              if (result[i] == 3) {
                return &lt;MaterialCommunityIcons
                    name=&quot;emoticon-neutral&quot;
                    size={40}
                    color=&quot;yellow&quot;
                  /&gt;;
              }
            }
          });
        });
    };
  </code></pre>
  <p>Here at the bottom of this function I call the renderIcon and I use pther parts for rendering flatlist</p>
  <pre><code>renderPost = (post, mood, props) =&gt; {
     
      return (
        &lt;View&gt;
          &lt;View
            style={{
              backgroundColor: &quot;#FFF&quot;,
              //borderRadius: 18,
              //borderTopWidth: 1,
              borderTopLeftRadius: 18,
              borderTopRightRadius: 18,
              borderBottomRightRadius: 18,
              //borderTopRightRadius: 18,
              //flexDirection: &quot;row&quot;,
              //alignSelf: &quot;flex-start&quot;,
              margin: 8,
              marginVertical: 6,
              overflow: &quot;hidden&quot;,
              borderWidth: 4,
              borderColor: &quot;#63003d&quot;,
              //padding: 8,
            }}
          &gt;
            &lt;View style={{ flexDirection: &quot;row&quot; }}&gt;
              &lt;View style={{ flex: 3.5 }}&gt;
                &lt;View
                  style={{
                    padding: 8,
                    flexDirection: &quot;row&quot;,
                    //justifyContent: &quot;space-between&quot;,
                    alignItems: &quot;center&quot;,
                  }}
                &gt;
                  &lt;Image
                    source={
                      post.avatar
                        ? { uri: post.avatar }
                        : require(&quot;../assets/tempAvatar.jpg&quot;)
                    }
                    style={styles.avatar}
                  /&gt;              
                &lt;Text style={styles.post}&gt;{post.text}&lt;/Text&gt;
                {/* &lt;Image
              source={post.image &amp;&amp; { uri: post.image }}
              source={post.image}
              style={styles.postImage}
              resizeMode=&quot;cover&quot;
            /&gt; */}
                &lt;View
                  adjustsFontSizeToFit={true}
                  style={{
                    textAlignVertical: &quot;center&quot;,
                    textAlign: &quot;center&quot;,
                    alignItems: &quot;center&quot;,
                    justifyContent: &quot;center&quot;,
  
                    //overflow: &quot;hidden&quot;,
                  }}
                &gt;    
               //HERE I CALL THE FUNCTION!!!!!!!!!!!!!!!!!!!!!
                  {this.renderElement()}
                &lt;/View&gt;
              &lt;/View&gt;
        &lt;/View&gt;
      );
    };
  </code></pre>
  <p>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?</p>