CODEWITHSUNDEEP
react-nativereact-native-flatlist
raja ali haider
raja ali haider

Reputation: 67

how to use if condition in react native flatlist

How to use if condition in flatlist of react native . I am creating a social app in react native so I created a screen in which I render all users by using flatlist so i just want that whenever status with that user is zero which mean he is no longer friend of that user then my button in flatlist should be 'add friend' else it should be 'unfriend'. or in simpler words when item.status===0 then add friend button display else unfriend button display .My flatlist is like that.

<FlatList
  data={this.state.user}
  keyExtractor={item => item.id}
  renderItem={({ item, index }) => {
    return (
      <View>
        <View style={{ flexDirection: 'row', marginTop: 10, }}>
          <Image style={{...}} source={{ uri: '' }} />
          <View>
            <Text style={{..}}>{item.full_name}</Text>
              <View>
                 //if item.status==0 below code works
                <View>
                  <TouchableOpacity style={..} onPress={() => this.sendRequest}>
                    <Text style={styles.submitButtonText}>{item.status = 0 }Add Friend</Text>
                  </TouchableOpacity>
                </View>
                <View style={styles.space} />
                <View>
                  <TouchableOpacity style={styles.submitButton}>
                    <Text style={styles.submitButtonText}>Remove</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </View>
        </View>
      )
    }}
  />

Upvotes: 0

Views: 1607

Answers (2)

Giovanni Esposito
Giovanni Esposito

Reputation: 11176

You could write something like:

<FlatList
  data={this.state.user}
  keyExtractor={item => item.id}
  renderItem={({ item, index }) => {
    return (
      <View>
        <View style={{ flexDirection: 'row', marginTop: 10, }}>
          <Image style={{...}} source={{ uri: '' }} />
          <View>
            <Text style={{..}}>{item.full_name}</Text>
              <View>
                {item.status === 0 && <View>
                  <TouchableOpacity style={..} onPress={() => this.sendRequest}>
                    <Text style={styles.submitButtonText}>Add Friend</Text>
                  </TouchableOpacity>
                </View>}
                <View style={styles.space} />
                {item.status !== 0 && <View>
                  <TouchableOpacity style={styles.submitButton}>
                    <Text style={styles.submitButtonText}>Remove</Text>
                  </TouchableOpacity>
                </View>}
              </View>
            </View>
          </View>
        </View>
      )
    }}
  />

This is how you can conditional render button based on item.status value.

Explanation: if you want to conditional render something (button, div...) in React you have to embrake html component into {} bracket and then add boolean condition.

So in your case:

{item.status === 0 && //<-- this html will be rendered only if item.status is equal to 0
   <View>
      <TouchableOpacity style={..} onPress={() => this.sendRequest}>
         <Text style={styles.submitButtonText}>Add Friend</Text>
      </TouchableOpacity>
   </View>}

 {item.status !== 0 && //<-- this html will be rendered only if item.status is different from 0
    <View>
       <TouchableOpacity style={styles.submitButton}>
          <Text style={styles.submitButtonText}>Remove</Text>
       </TouchableOpacity>
    </View>}

Upvotes: 1

Poptocrack
Poptocrack

Reputation: 3009

You can do it this way:

{item.status === 0 && (
  // ... code to render
)}

Upvotes: 1

Related Questions