Change background of list item - reactjs

Question

How can I change the background color of multiple list items when they are selected? I am using react-native-accordian and react-native-collapsible and using flat list within content.
_renderContent(section, i, isActive)
{
//console.log("MY DATA---",section.time_slots);
return (
<List
style={inStyles.body}
containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={section.time_slots}
renderItem={
({ item,index }) =>
(
<ListItem
onPress={() => this.selectSlot(item,section.date,index)}
style = {[inStyles.list , {marginLeft : 15}, {marginRight : 5},
{backgroundColor: (this.state.selectedItem[index]) ? 'green' : 'red'}]}
title={`${item}`}
containerStyle={{ borderBottomWidth: 0 }}
/>
)
}
keyExtractor={item => section.date+item}
ItemSeparatorComponent={this.renderSeparator}
ListFooterComponent={this.renderFooter}
/>
</List>
);
}
I just want to change the style of a list item dynamically using TouchableOpacity. But unable to do so.

Answer 1

You should change your code as below, your class would be like this:
contructor (props) {
super(props)
let selectedItemTemp = []
for(let i=0; i<section.time_slots.length; i++) { //section.time_slots is your FlatList data
selectedItemTemp.push(false)
}
this.state = {selectedItem: selectedItemTemp}
}
selectSlot = (item, section.date, index) => {
let {selectedItem} = this.state
selectedItem[index] = !selectedItem[index]
this.setState({selectedItem})
... // your other codes
}
render() {
return (
...
<FlatList
data={section.time_slots}
renderItem={
({ item, index }) => (
<TouchableOpacity
onPress={() => this.selectSlot(item,section.date, index)}>
<ListItem style = {[inStyles.list , {marginLeft : 15}, {marginRight : 5}, {backgroundColor: (this.state.selectedItem[index]) ? 'green' : 'white'}]}
title={`${item}`}
containerStyle={{ borderBottomWidth: 0 }}
/>
</TouchableOpacity>
)
} {item => section.date+item}
ItemSeparatorComponeultiple Selectiont={this.renderSeparator}
ListFooterComponent={this.renderFooter}
/>
...
);
}