title: Adding one item of a single product, changing the quantity of all products in ReactJS
body: <p>Tried to add two buttons, one to add item(increment the quantity count) and other to delete item(decrements quantity count) to update the quantity parameter. When i click on the add item button of one product, the quantity of all the products is  getting updated. How to make these buttons work independently for each product? 
  Below is the code i wrote: </p>
  
  <pre><code> import React from 'react';
  import ReactDOM from 'react-dom';
  import Paper from 'material-ui/Paper';
  import products from './Products';
  import {
      Table,
      TableBody,
      TableHeader,
      TableHeaderColumn,
      TableRow,
      TableRowColumn, } from 'material-ui/Table';
  
  
  
  const style = {
      height: 600,
      width: 900,
      margin: 20,
      textAlign: 'center',
      display: 'inline-block',
    };
  
  
  export default class Cart extends React.Component{
      constructor(props){
          super(props);
          this.state={ count:1 }
      }
  
  
  addOne(id) {                              // addOne one item when button clicked
      this.setState(prevState =&gt; {
        return {count : prevState.count + 1 }
       });
     }
  
     removeOne(id) {                              // removeOne one item when button clicked
      this.setState(prevState =&gt; {
          if(prevState.count&gt;=1) {
        return { count : prevState.count - 1 }
          }
          else{
              alert('quantity cant be less than zero')
          }
       });
     }
  
  render(){
      return(
          &lt;div&gt; 
              &lt;Paper style={style} zDepth={1} &gt; 
                  &lt;div&gt; 
                      &lt;div&gt;
                          &lt;h3&gt; here are the products ! &lt;/h3&gt;
                      &lt;/div&gt; &lt;hr/&gt;
                      &lt;div&gt;
                                  {Products.map(productlist =&gt;(
                                      &lt;Table &gt;
                                          &lt;TableHeader displaySelectAll={false} adjustForCheckbox={false} &gt;
                                              &lt;TableRow&gt;
                                                  &lt;TableHeaderColumn&gt;&lt;/TableHeaderColumn&gt;
                                                  &lt;TableHeaderColumn&gt;&lt;/TableHeaderColumn&gt;
                                                  &lt;TableHeaderColumn&gt;&lt;/TableHeaderColumn&gt;
                                                  &lt;TableHeaderColumn&gt;&lt;/TableHeaderColumn&gt;
                                              &lt;/TableRow&gt;
                                          &lt;/TableHeader&gt;
                                          &lt;TableBody displayRowCheckbox={false} &gt;
                                              &lt;TableRow key={productlist.id}&gt;
                                                  &lt;TableRowColumn&gt;{productlist.name}&lt;/TableRowColumn&gt;
                                                  &lt;TableRowColumn&gt;{productlist.description}&lt;/TableRowColumn&gt;
                                                  &lt;TableRowColumn&gt;{productlist.description}&lt;/TableRowColumn&gt;
                                                  &lt;TableRowColumn&gt;Price per each item:&lt;br/&gt; {productlist.price}&lt;/TableRowColumn&gt;
                                                  &lt;TableRowColumn&gt;
                                                  &lt;input  type='button' onClick={this.addOne.bind(this,productlist.id)} value='add an item'/&gt;
                                                  &lt;input  type='button' onClick={this.removeOne.bind(this,productlist.id)} value='remove an item'/&gt;
                                                      &lt;br/&gt; &lt;span&gt; quantity:  {this.state.count}  &lt;/span&gt; 
                                                  &lt;/TableRowColumn&gt;
                                              &lt;/TableRow&gt;
                                          &lt;/TableBody&gt;
                                      &lt;/Table&gt;
                                  ))}
  
                              &lt;/div&gt;
                              &lt;div&gt; 
                                  &lt;p&gt; Total price: &lt;/p&gt;
                      &lt;/div&gt;
  
                   &lt;/div&gt;
              &lt;/Paper&gt;
          &lt;/div&gt;
      );
  }
  }
  </code></pre>
  
  <p>Below is the sample Product.js code: </p>
  
  <pre><code>    let Products=[
      {
          id:1, name:"Fastrack Women's Watch", 
          description:"Analog Pink Dial Women's Watch - 6150SM04",
          price:2500
      },
      {
          id:2, name:"Fastrack Women's Watch", 
          description:"Analog Pink Dial Women's Watch - 6150SM04",
          price:2100
      },
      {
          id:3, name:"Fastrack Women's Watch", 
          description:"Analog Pink Dial Women's Watch - 6150SM04",
          price:1800
      },
  
  ];
  
  export default Products;
  </code></pre>