how to target exact item in react native flat list and hide something? - react-native

Question

i am using flatList in react native . i want to hide only perticular item from the list. current when i am hiding a button every button is hidden from the list.
when i am pressing the bid now button . then all the button is hidden if success. i want to hide the particular items bid now button.
/////////////// main.js
constructor (props){
super(props);
this.state = {
access_token: null,
user : null,
biddata: [],
totalBid : null,
page: 0,
showbidmodel: false,
bidValue: '',
biditem : '',
hideButton: false
}
}
placeBid = (e) => {
if (this.state.bidValue.length < 2) {
Toast.show({
text: ' please enter a valid bid!',
position: 'top',
buttonText: 'Okay'
})
}
else {
var url = `...............`;
const { params } = this.props.navigation.state;
console.log("all paramssssssssf ---> ", params.token);
console.log("check state-------------->>>>",this.state)
var data = {
price: this.state.bidValue,
material_type: this.state.biditem.material_type,
truck_type: this.state.biditem.truck_type,
material_name: this.state.biditem.material_name,
num_of_trucks: this.state.biditem.num_of_trucks,
truck_name: this.state.biditem.truck_name,
_id: this.state.biditem._id,
weight: this.state.biditem.weight,
extra_notes: this.state.biditem.extra_notes,
order_no: this.state.biditem.order_no,
staff: 'no',
created_by: this.state.biditem.created_by
};
console.log("post body ----------------->>>>>", JSON.stringify(data))
fetch(url, {
method: "POST",
body: JSON.stringify(data),
headers: {
"Content-Type": "application/json",
Accept: "application / json",
Authorization: "Bearer " + params.token
}
}).then(res => res.json())
.catch(error => {
console.log("bid error :", error)
})
.then(response => {
console.log("all BID SUCCESs response---> ", response);
const SUCCESS = 'Quotation Saved'
if (response.status === SUCCESS) {
Toast.show({
text: ' SUCCESS !!!! BID is placed . ',
position: 'top',
buttonText: 'Okay'
})
this.setState({ showbidmodel: false , hideButton: true })
}
else
return;
});
}
}
renderItem = ({ item }) => {
return (
<ListItem
id={item.index}
selected={() => { alert(item + "selected")}}
onPressItem ={ this.onPressItem }
onPressDetails ={ this.onPressDetails }
title={item.index}
hideButton = {this.state.hideButton}
items = { item }
/>
);
}
return (
<View style = {styles.container}>
<View style={styles.innerContainer} >
<Header title="Home" navigation={this.props.navigation} />
<Modal
animationType="slide"
transparent={false}
visible={this.state.showbidmodel}
onRequestClose={() => {
this.setState({ showbidmodel: false });
}}>
<KeyboardAvoidingView style={styles.modalStyle}>
<View style={styles.modalInnerStyle }>
<Text style={{ color: "white", fontWeight: "bold", textAlign: "center", fontSize: 20 }}>
Place your bid Here.
</Text>
<InputLocal
placeholder=" your bid "
onChange={(e) => { this.setState({ bidValue: e }); } }
value={this.state.bidValue}
/>
<TouchableOpacity
style={styles.login}
onPress={ this.placeBid }
>
<Text style={{ color: "white", fontWeight: 'bold' }}> Submit </Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</Modal>
{typeof this.state.biddata !== "undefined" && this.state.biddata.length > 0 ?
<FlatList
data={this.state.biddata}
keyExtractor={this.keyExtractor}
extraData={this.state}
renderItem={this.renderItem}
onEndReached = { this.loadMoreTripData }
onEndReachedThreshold = {1}
/> : <ActivityIndicator
style = {styles.loading}
size="large" color="#0000ff"
/> }
</View>
</View>
);
//////////////// listItem.js
onPressDetail = () => {
this.props.onPressDetails( this.props.items._id.$oid );
};
onPressBid = () => {
this.props.onPressItem(this.props.items._id.$oid);
};
<View style={{ flex: 1, flexDirection: 'row',}} >
<MyIcon name="airport-shuttle" />
<Text style={styles.textStyle}>Truck Type: {this.props.items.truck_type}</Text>
</View>
{ !this.props.hideButton ? (
<View style={styles.buttonView}>
<View style={styles.flex} >
<TouchableOpacity
style={styles.detail}
onPress={this.onPressDetail}
>
<Text style={{ color: "white", fontWeight: 'bold', textAlign: "center" }}> Details </Text>
</TouchableOpacity>
</View>
<View style={styles.flex} >
<TouchableOpacity
style={styles.bid}
onPress={this.onPressBid}
>
<Text style={{ color: "white", fontWeight: 'bold', textAlign: "center", backgroundColor: '#ED4C67' }}> Bid Now </Text>
</TouchableOpacity>
</View>
</View>
) : null }
</View>

Answer 1

You can store index of the item on which you want to hide button. For that you have to pass index in your renderItem() and from there to your ListItem
renderItem={({ item, index }) => this. renderItem(item, index)}
or
You can have variable inside your each item, which indicates to show or hide button