Managing with objects inside of array React state - arrays

Question

I am trying to manage objects inside of an array. So I have array item which has some objects.
state = {
item: [
{
cls: 'powder',
img: ariel_12,
productName: 'Стиральный порошок Ariel 1,5 КГ',
price: 200,
heart: heart,
qty: 1
},
{
cls: 'powder',
img: ariel_12,
productName: 'Стиральный порошок Ariel 1,5 КГ',
price: 200,
heart: heart,
qty: 1
},
],
loader: true
};
I added a method which changes the image on click, but it changes the image in all objects
likedBtn = () => {
this.setState((prevState) => ({
item: prevState.item.map(
obj => (obj.heart === heart ? Object.assign(obj, {heart: heartRed}): obj)
)
}));
console.log('liked');
}
How can I assign that method to prevent acting on all the objects inside of an array?
<ProductsItems liked={this.likedBtn} addToCart={this.clickHandler} cls={item.cls} img={item.img} productName={item.productName} price={item.price} heart={item.heart} />
Sorry for such a dumb explanation but I hope you'll understand it. The heart is blue and it is red when clicked. That is all that I need but when I click only the one heart, all others change as well

Answer 1

This would do it
state = {
item: [
{
cls: 'powder',
img: ariel_12,
productName: 'Стиральный порошок Ariel 1,5 КГ',
price: 200,
heart: heart,
qty: 1
},
{
cls: 'powder',
img: ariel_12,
productName: 'Стиральный порошок Ariel 1,5 КГ',
price: 200,
heart: heart,
qty: 1
},
],
loader: true
};
render(){
<div>
{this.state.item.map( (obj,index) => {
<div
key={index}
onClick={() => this.handleClick(index)}
liked={this.likedBtn}
cls={obj.cls}
img={obj.img}
productName={obj.productName}
price={obj.price}
heart={obj.heart}
>
</div>
})}
</div>
}
handleClick = index => {
this.setState( prevState => (prevState.item[index].heart = heartRed, prevState)
}