Counters for each item in React.js - reactjs

Question

I know that some similar issues already have been posted here, but I cannot find the solution for my issue and here I am stuck with this code.
The problem is when I want to Increase or Decrease a counter, all other counters changes. Also I'm wondering were should I store the counter, should it be a unique variable or an array for each item.. ?
I'm having:
product_items.jsx
import React, { Component } from "react";
import Item from "./product_item";
class Items extends Component {
constructor(props) {
super(props);
this.state.unique = 0;
}
state = {
brands: [
{
id: 0,
name: "Water0",
price: "1.53",
{
id: 1,
name: "Water1",
price: "1.47",
},
{
id: 2,
name: "Water2",
price: "1.58",
},
{
id: 3,
name: "Water3",
price: "1.41",
category: "Still Water",
},
],
counter: 10,
counters: [
{ id: 1, value: 0 },
],
filterBrands: [],
};
componentDidMount() {
this.setState({
filterBrands: this.state.brands,
});
}
handleClick = (name) => {
let filterBrands = [];
if (name === "All") {
filterBrands = this.state.brands;
} else {
filterBrands = this.state.brands.filter(
(brands) => brands.category === name
);
}
this.setState({ filterBrands });
};
addToCart = (counter) => {
console.log("addToCart DONE");
this.setState(({ unique }) => ({
unique: unique + 1,
}));
};
handleIncrement = (counter) => {
// console.log(counter);
console.log("handleIncrement DONE");
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { ...counter };
counters[index].value++;
// this.setState({ counters });
// this.setState({ unique: this.state.unique + 1 });
// console.log(this.state.unique);
this.setState(({ unique }) => ({
unique: this.state.unique + 1,
}));
};
handleDecrease = (counter) => {
console.log("handleDecrease DONE");
const counters = [...this.state.counters];
const index = counters.indexOf(counter);
counters[index] = { ...counter };
counters[index].value--;
// this.setState({ counters });
// this.setState({ unique: this.state.unique - 1 });
this.setState(({ unique }) => ({
unique: this.state.unique - 1,
}));
};
render() {
return (
<div className="ctg-flex">
<div className="items">
{this.state.filterBrands.map((id, brands) => (
<Item
// key={id.key}
key={brands}
dataText={id.name}
dataPrice={id.price}
// counter_unique={this.state.counter_unique}
unique={this.state.unique}
// counter={this.state.counters.value}
counters={this.state.counters}
onClickaddToCart={this.addToCart}
onIncrement={this.handleIncrement}
onDecrease={this.handleDecrease}
/>
))}
</div>
</div>
);
}
}
export default Items;
product_item.jsx
import React, { Component } from "react";
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import Counter from "./counter";
class Item extends Component {
render() {
return (
<Card >
<Card.Body>
<Card.Text>
this.props.unique : {this.props.unique}
// this.props.counters.value : {this.props.counters.value} //test isn't working
</Card.Text>
</Card.Body>
<Counter
// counters={counters}
counter={this.props.counter}
onIncrement={this.props.onIncrement}
onDecrease={this.props.onDecrease}
unique={this.props.unique}
/>
<Button
style={{
display: this.props.unique === 0 ? "block" : "none",
}}
onClick={() => this.props.onClickaddToCart(this.props.counter)}
>
ADD TO CART
</Button>
</Card>
);
}
}
export default Item;
and
counter.jsx
import React, { Component } from "react";
import Button from "react-bootstrap/Button";
class Counter extends Component {
render() {
return (
<div
style={{
display: this.props.unique === 0 ? "none" : "flex",
}}
>
<Button
onClick={() => this.props.onDecrease(this.props.counter)}
>
Decrease
</Button>
<span>
{this.props.unique} in cart
</span>
<Button
onClick={() => this.props.onIncrement(this.props.counter)}
>
Increase
</Button>
</div>
);
}
}
export default Counter;

Answer 1

Your counter should be an object whose key will be the id values of your products .
counter = {
[id1] : 0 , //initially 0
[id2] : 0
... and so on
}
then each time you increase the count get the id of the product and increase the counter
handleIncrement = (counter) => {
// get the id of the clicked product
const newCounter = { ... this.state.counter , [id] : counter[id]+1}
this.setState({counter : newCounter})
};
and get the counter value for each product object
this.state.counter[productId]

Answer 2

so final I get it, I merged product and counter in a single array to catch same single key in all array and use count properly.
product_items.jsx
state = {
brands: [
{
id: 0,
name: "Water0",
price: "1.53",
value: 0,
},
{
id: 1,
name: "Water1",
price: "1.17",
value: 0,
},
...
]
}
...
render() {
return (
<div >
{this.state.brands.map((item, key) => (
<Item
key={key}
item={item}
id={key}
onClickaddToCart={this.addToCart}
onIncrement={this.handleIncrement}
onDecrease={this.handleDecrease}
brands={this.state.brands}
/>
))}
</div>
);
}