change state individually in react-native - reactjs

Question

The data is coming dynamically and I want to change state of bookmark icon individually. When we click on first box then only change state of bookmark of that box only others will remain as it is.
My code
this.state={ isTagged: false };
_handle_tag_btn() {
if(this.state.isTagged == true) {
this.setState({isTagged: false})
}
else {
this.setState({isTagged: true})
}
}
render(){
return(
<View style={{flex: 1}}>
{
this.state.product_detail.length <= 0 ?
<ActivityIndicator color = '#bc2b78' size = "large" />
:
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
{
this.state.product_detail.map((data, index) => (
<View style={s.cate_detail_box}>
<TouchableOpacity activeOpacity={0.9} style={{height: 190}} onPress={this._goto_individual_detail}>
<Image source={{uri: data.images[0].src}} style={s.img}/>
</TouchableOpacity>
<View style={{padding: 5}}>
<View activeOpacity={0.9} style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View>
<CapitalizedText style={s.cate_detail_title}>{data.title}</CapitalizedText>
<Text style={s.cate_detail_price}>{'₹' + data.variants[0].price}</Text>
</View>
<TouchableOpacity activeOpacity={0.7} onPress={this._handle_tag_btn} key={index}>
{
this.state.isTagged ?
<Icon size={icon_size} color="#aaa" name="turned-in-not" />
:
<Icon size={icon_size} color="#aaa" name="turned-in" />
}
</TouchableOpacity>
</View>
</View>
</View>
))
}
</View>
}
</View>
);
}
My output https://i.stack.imgur.com/05uPN.jpg
In this image all bookmarks are selected which is not required.
Any help is appreciated. Thank you.

Answer 1

You can take the bookmark view inside .map and create a new component and then toggle the bookmark status in that component. You pass the data attribute as a prop to this new component -
class Bookmark extends React.Component {
state = { isTagged: false }
_handle_tag_btn() {
if (this.state.isTagged == true) {
this.setState({ isTagged: false })
} else {
this.setState({ isTagged: true })
}
}
render() {
const { data } = this.props
return (
<View style={s.cate_detail_box}>
<TouchableOpacity
activeOpacity={0.9}
style={{ height: 190 }}
onPress={this._goto_individual_detail}
>
<Image source={{ uri: data.images[0].src }} style={s.img} />
</TouchableOpacity>
<View style={{ padding: 5 }}>
<View
activeOpacity={0.9}
style={{ flexDirection: "row", justifyContent: "space-between" }}
>
<View>
<CapitalizedText style={s.cate_detail_title}>
{data.title}
</CapitalizedText>
<Text style={s.cate_detail_price}>
{"₹" + data.variants[0].price}
</Text>
</View>
<TouchableOpacity
activeOpacity={0.7}
onPress={this._handle_tag_btn}
key={index}
>
{this.state.isTagged ? (
<Icon size={icon_size} color="#aaa" name="turned-in-not" />
) : (
<Icon size={icon_size} color="#aaa" name="turned-in" />
)}
</TouchableOpacity>
</View>
</View>
</View>
)
}
}
And then use it inside your .map like this -
this.state.product_detail.map((data, index) => <Bookmark data={data} />)

Answer 2

You could set the tagged object in state, for example:
this.state={ taggedObject: null };
_handle_tag_btn(data) {
if(this.state.taggedObject === data) {
this.setState({taggedObject: null})
}
else {
this.setState({taggedObject: data})
}
}
// ...
<TouchableOpacity activeOpacity={0.7} onPress={() => this._handle_tag_btn(data)} key={index}>
{
this.state.taggedObject === data ?
<Icon size={icon_size} color="#aaa" name="turned-in-not" />:
<Icon size={icon_size} color="#aaa" name="turned-in" />
}
</TouchableOpacity>