Issues with the like and increment button functionality within the FlatList
Here are my constructor, increment, and like functions:
constructor(props){
super(props);
this.state = {
count: true,
count1: 0,
};
}
onlike = () => {
this.setState(state => ({
count: !state.count
}));
}
_incrementCountNew = () => {
let newCount1 = this.state.count1 + 1
this.setState({
count1: newCount1
})
}
<FlatList
data={data}[
renderItem = {({ item }) => (
<View style={styles.Text2}>
<Image
source={item.image}
style={{ width: 329, height: 250, marginRight: 0 }} />
<Text style={{ marginLeft: 10, fontSize: 15, marginTop: 10 }}>
{item.content}
</Text>
<View style={{ marginLeft: 10, marginTop: 10, marginRight: 250, marginBottom: 1 }}>
<TouchableOpacity>
<Icon2
name={item.vectoricon}
size={20}
color="#b3b3b3"
/>
</TouchableOpacity>
<Text style={{ marginLeft: 25, marginTop: -20, color: "#b3b3b3" }}>{this.state.count ? '0' : '1'}</Text>
</View>
<View style={{ marginLeft: 90, marginTop: -20, marginBottom: 1, marginRight: 70 }}>
<TouchableOpacity>
<Icon1
name={item.vectoricon1}
size={20}
color="#b3b3b3"
onPress={this._incrementCountNew} />
</TouchableOpacity>
<Text style={{ marginLeft: 25, marginTop: -20, color: "#b3b3b3" }}>{this.state.count1}</Text>
</View>
<View style={styles.lineStyle} />
<View style={{ marginLeft: 10, marginTop: 1, marginRight: 270 }}>
<TouchableOpacity onPress={this._incrementCountNew}>
<Icon1
name={item.vectoricon1}
size={30}
/>
</TouchableOpacity>
</View>
<View style={{ marginLeft: 60, marginTop: -30, marginBottom: 10, marginRight: 210 }}>
<TouchableOpacity onPress={this.onlike}>
<View>
{this.state.count ? <Icon3 name={item.vectoricon2} size={30} /> : <Icon3 name={item.vectoricon3} size={30} />}
</View>
</TouchableOpacity>
</View>
</View>
)}
keyExtractor = { this.keyExtractor } />