how to use if condition in react native flatlist - react-native

Question

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>
)
}}
/>

Answer 1

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>}

Answer 2

You can do it this way:
{item.status === 0 && (
// ... code to render
)}