push elements selected into one object - reactjs

Question

I have a component called "itemSelection" and another one called "Item"
in the itemSelection i just map through an api response like this
<div className="row">
{this.state.items.map(i => <Item name={i.name} quantity={i.quantity} />)}
</div>
in the "Item" component I have like 3 card item with a select button. in its state there is also "quantity" key but that's for the quantity selected by the user of a specific item. So, what I'm try to achieve here is if the user selected one item and quantity of 2, I want to take that in an object and put that object in an array, and if the user selected another item with quantity of 3, I want that in another object and just push that object in the array where I have put the first object to be something like that
[{name: first item, quantity: 2}, {name: second item, quantity: 3}]
here is what I tried
targetValue = (e) => {
e.preventDefault();
let qua = e.target.textContent;
this.setState({quantity: qua, selected: true});
const newQuantity = {name: this.props.name, quantity: qua}
const quantities = [...this.state.quantities];
quantities.push(newQuantity);
this.setState({quantities});
console.log(quantities);
}
The function above is included in the "Item.js" and here is the return function
<div className="col-md-4">
<div className={"card " + (this.state.selected ? "frame" : "")} style={{width: 18+'rem'}}>
<img className="card-img-top" style={{width: 10+'rem', margin: 0+' '+'auto'}} src={this.props.img} alt="Card image cap"/>
<div className="card-body">
<h5 className="card-title">{this.props.name}</h5>
<p clasNames="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<div className="description">
<p className="card-text">30€</p>
<p className={"card-text " + (this.state.selected ? "" : "displayQua")}>Q: {this.state.quantity}</p>
</div>
<button onClick={this.toggleMenu} href="#" style={{width: 100 + '%', margin: 0+' '+'auto'}} className="btn">SELECT</button>
</div>
</div>
<div className="menu">
<div className={this.state.visible ? "" : "visible"}>
<div className="menu">
{_.times(this.props.quantity, i => (
<a onClick={this.targetValue} key={i} href="#">{i + 1}</a>
))}
</div>
</div>
</div>
</div>

Answer 1

The question you have asked is a bit unclear. But as far as I understand there could be 2 issues :
Change const quantities = [...this.state.quantities]; to let quantities = [...this.state.quantities]; since you'll be pushing new values to the array.
let qua = e.target.textContent; not sure if this is the best way to get the value. Try let qua = e.target.value; and pass the value param in anchor tag <a onClick={this.targetValue} value={i+1} key={i} href="#">{i + 1}</a>
Sharing the output for what you tried will definitely help to understand better.

Answer 2

The best way to push elements to a state array in React. You can do this
const newQuantity = {name: this.props.name, quantity: qua};
this.setState(previousState => ({
quantities : [...previousState.quantities, newQuantity]
}));
Also don’t use multiple setStates inside handler function use one that’s enough :)