onClick event handling to call function on that particular button - reactjs

Question

import React from 'react';
import './MenuCard.css';
class MenuCard extends React.Component {
constructor(props) {
super(props);
this.state = {
showButton: false,
hideButton: true,
aValue: 1,
breads: [],
category: [],
ids: 0
};
this.onShowButton = this.onShowButton.bind(this);
}
onShowButton = (id) => {
this.setState({
showButton: !this.state.showButton,
hideButton: !this.state.hideButton
}));
}
onValueIncrease = () => {
this.setState({aValue: this.state.aValue + 1});
}
onValueDecrease = () => {
this.setState({aValue: this.state.aValue - 1});
}
render() {
return (
<div>
{this.state.category.map(types => {
return (<div>
<div className="menu-head">{types}</div>
< div className="container-menu">
{this.state.breads.map((d, id)=> {
if (d.category === types) {
return (
<div className="content">
<div className="items"> {d.item_name}</div>
<div className="prices"> {d.price} Rs.</div>
<button id ={id} onClick={() => this.onShowButton(d.id)}
hidden={this.state.showButton}
className="add-menu-btn"> add
</button>
<span key={d.id} hidden={this.state.hideButton}>
<button id={d.id} className="grp-btn-minus"
onClick={this.state.aValue <= 1 ? () => this.onShowButton(d.id) : () => this.onValueDecrease(d.id)}>-
</button>
<input className="grp-btn-text" type="text"
value={this.state.aValue} readOnly/>
<button id={d.id} className="grp-btn-plus"
onClick={() => this.onValueIncrease(d.id)}>+
</button>
</span>
</div>
)
}
})}
</div>
</div>)
})}
</div>
)
}
There are multiple buttons according to items 1.
And here the problem when I click on single button all get updated I need only a single button to click with a single update 2

Answer 1

You need to keep the values in an array in the state, i.e:
values: [
{ id: 1, value: 20},
{ id: 2, value: 1}
]
If you then need to set the state, could look like this:
const values = Object.assign({}, this.state.values, { [id]: value })
this.setState({ values })
To get the value from state:
const value = this.state.values[id]