title: How to update multiple state in react js
body: <p>I am not sure weather the title of the question is right or not. I run into some problem and i have no idea how to solve them.</p>
  
  <p>In my app there is cart page there is list of items. And each item has a field quantity.which can be updated. My problem Here is when i initiate i state quantity and make two function out of it which increase and decrease the quantity.but the problem is when i click on addQuantity it updates all the products quantity at the same time. I have really no idea to solve this i have been trying to figure out from last couple of days .
  These are the two items.</p>
  
  <p><a href="https://i.stack.imgur.com/B97I8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B97I8.png" alt="Item Image"></a></p>
  
  <blockquote>
    <p>These are my codes</p>
  </blockquote>
  
  <p>class CartContainer extends React.Component {
    state = {
      quantity: 1,
    };</p>
  
  <p>componentDidMount() {
      this.props.getItemsAddedToCart();
    }</p>
  
  <p>render() {</p>
  
  <pre><code>const addItem = () =&gt; {
    this.setState({
      quantity: this.state.quantity + 1,
    });
  };
  
  const removeItem = () =&gt; {
    this.setState({
      quantity: this.state.quantity - 1,
    });
  };
  </code></pre>
  
  <blockquote>
    <p>Cart.js</p>
  </blockquote>
  
  <p>return cartData.map((item, index) => {
      return (
        
          
            
              
            </p>
  
  <pre><code>      &lt;Grid item xs={4} container justify="space-around"&gt;
          &lt;CartItemDetails
            quantity={quantity}
            addItem={addItem}
            removeItem={removeItem}
            addQty={addQuantity}
            subQty={subtractQuantity}
            cart={item}
          /&gt;
        &lt;/Grid&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  );
  </code></pre>
  
  <blockquote>
    <p>CartItemDetail.js</p>
  </blockquote>
  
  <pre><code>return (
    &lt;Grid container className="cart-item-details"&gt;
  
      &lt;Grid xs={12} md={4}&gt;
        {!this.props.team ? (
          &lt;Grid className="counter" xs={12} container&gt;
            &lt;Grid container justify="center" alignItems="center" xs={4}&gt;
              &lt;button
                onClick={this.props.removeItem}
                className="decrement"
              &gt;&lt;/button&gt;
            &lt;/Grid&gt;
            &lt;Grid container justify="center" alignItems="center" xs={4}&gt;
              &lt;span&gt;{this.props.quantity}&lt;/span&gt;
            &lt;/Grid&gt;
            &lt;Grid container justify="center" alignItems="center" xs={4}&gt;
  
              &lt;button
                onClick={this.props.addItem}
                className="increment"
              &gt;&lt;/button&gt;
            &lt;/Grid&gt;
          &lt;/Grid&gt;
        ) : (
          ""
        )}
  </code></pre>
  
  <p>Any help would be great I really want to figure this out .</p>