Новое в React, увеличение/уменьшение в корзине

Я делаю этот небольшой проект, и я застрял, но не настолько, я надеюсь! Я вставил весь код, чтобы вы могли, так сказать, увидеть всю картину.

Что я хочу сделать, так это заставить событие onClick просто изменить фактический элемент в корзине. На данный момент, когда вы нажимаете + или -, затрагиваются все элементы. Я пробовал МНОГО разных вещей, но я новичок в этом, поэтому я не уверен, что попробовать дальше.

/* jshint esversion: 6 */

import React from 'react';
import Cart_api from 'shared/module/cart_api';
import Cart from 'shared/module/cart';
import {OrderItem} from 'shared/module/cart';

export default class Minicart extends React.Component {
    constructor() {
        super();
        this.state = {
            items: []
        };


    }

    componentWillMount() {
        var self = this;
        Cart_api.orderItems({success: function(data) {
            console.log('hhh', data)
            data.orderItem.forEach(function(orderItem) {
                self.add(orderItem);
            });
        }});  
    }

    add(orderItem) {
        this.setState(prevState => ({
           items: [
               ...prevState.items,
               {
                   id: orderItem.productId,
                   quantity: parseInt(orderItem.quantity)
               }
           ]

        }));

    }

    remove(id){
        console.log('remove', id);
      this.setState(prevState => ({
         items: prevState.items.filter(item => item.id !== id)            
      }));
    }

    IncrementItem(id) {
        this.setState(prevState => ({
            items: prevState.items.filter(item =>  {
                item.quantity = item.quantity + 1;
                    return true;    
                })
            }));
            }         

    DecreaseItem(id) {
        this.setState(prevState => ({
            items: prevState.items.filter(item => {
                item.quantity = item.quantity - 1;
                return true;
            })
        }));
        }

    render(data) {
        return (
            <div style={{textAlign: 'center'}}>
                <h1>Hello World, im React! :D</h1>
                <ul>
                    {
                        this.state.items.map((item) => {
                            return (
                                <li key="{item.id}">item: {item.id} ({item.quantity}) 
                                <button onClick={() => this.remove(item.id)}>remove /</button>
                                <button onClick={() => this.IncrementItem(item.id)}>item +</button> / 
                                <button onClick={() => this.DecreaseItem(item.id)}>item -</button>
                               </li>
                           )
                        }) 
                    }                                       
                </ul>
            </div>
        );
    }
}