Reputation: 67
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
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
Reputation: 3009
You can do it this way:
{item.status === 0 && (
// ... code to render
)}
Upvotes: 1