New to React, Increment/Decrement in shopping cart

Question

I'm doing this small project and I'm stuck, but not that much I hope! I've pasted all code so you can see the whole picture so to speak.

What I wanna do is to make the onClick event just change the actual item in the cart. As of now, when you press + or - all items are affected. I've tried ALOT of different things, but I'm new to this so I'm not sure what to try next.

/* 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>
        );
    }
}

Answer 1

As your code is linted for ES6, you can do it like this:

IncrementItem(id) {    
    this.setState(prevState => ({
        const items = prevState.items
        const item = items.find(id)
        item.quantity = item.quantity + 1
        return {items}
    }))
}

Edit: rewritten with prevState.

Answer 2

Here item value will be your current item you want to increment. And index will be your index value assigned from map function.

incrementCount(item,index){ // index will be the key value 
    const items = this.state.itemsList;           
    item.quantity += 1;
    items.splice(index,1,item);
    this.setState({
      itemsList: items
    });
   }


render() {
    const { itemsList } = this.state;

    return (
      <div>
        <h1>CartItems</h1>
        <table border="1">
          <tbody>
            {itemsList.map((item, index) => {
              return (
                <tr key={index}>
                  <td>{item.label}</td>
                  <td>{Math.round(item.price)}</td>
                  <td>
                    <button onClick={() => this.decrementCount(item,index)}>
                      {' '}
                      -{' '}
                    </button>
                  </td>
                  <td>{item.quantity}</td>
                  <td>
                    <button onClick={() => this.incrementCount(item,index)}>
                      {' '}
                      +{' '}
                    </button>
                  </td>
                </tr>
              );
            })}
            <tr>
              <td></td>
              <td>{this.calculateTotal(itemsList)}</td>
            </tr>
          </tbody>
        </table>
      </div>
    );
}