Как объединить объект в массив при щелчке и обновить элемент при каждом последующем щелчке?

Question

Я работаю над активной корзиной покупок и пытаюсь выполнить следующие действия на основе массива, который я представлю после объяснения моих проблем:

1) Я пытаюсь проверить, соответствует ли размерклиент запрашивает доступен.

2) Если он недоступен, я хочу запустить функцию, которая будет:

   2A) Append the chosen object to the array.

   2B) On each subsequent click I want to update the stock to make sure that it alerts the 
       client that the item is not in stock anymore and I want to increase a new element 
       that I want to call "quantity" by one.

3) Это мой текущий массив размеров:

[
0:
size: 3
stock: 140
_id: "5d903adb01cdab06932b5566"

1:
size: 3.5
stock: 130
_id: "5d903adb01cdab06932b5565"

2:
size: 4
stock: 10
_id: "5d903adb01cdab06932b5564"

3: {_id: "5d903adb01cdab06932b5563", 
size: 4.5, 
stock: 30}

4:
size: 5
stock: 53
_id: "5d903adb01cdab06932b5562"
]

4) Это функции, которые я тестирую на клике (я комментирую каждую из них, чтобы убедиться, что я не получаю никаких ошибок: 4A) Idx - индекс 4B) arr - весь массивобъектов 4C) prod - выбранный продукт, и я получаю обратно объект, на который нажал

onClick={() => this.onUpdateItem(idx, arr, prod)}

и

onClick={() => this.alertBox(prod, arr, item)}

5) Вот функции, которые я пробовал:

alertBox = (product, products, count) => {
        console.log(count)
        let newStock;
        let clickedSize;
        let selectedProduct;

        if (product.stock === 0) { 
            alert('The item is currently out of stock')
        } else {
            newStock = product.stock -= 1;  
            clickedSize = product.size;
            selectedProduct = product._id;
            let newProducts;
            let quantity = 0;

            products.map((item) => {
                return item._id === product._id ? 
                    newProducts = [...this.state.chosenSize , {...item, ...newStock }]
                    : product
            });
            const tester = [];
            const result = [];
            const newSize = [];
            let quantities = [];
            let items;
            let newIt;

            newProducts.forEach(function(el) {
                if (tester.indexOf(el._id) === -1) {
                    tester.push(el._id)
                    result.push(el)
                    items = {...el}
                }
            });

            let newArray = result.map((item, i) => Object.assign({}, item, item.stock -= 1));

            this.setState(prevState => ({
                chosenSize: newArray
            }))

        }
    }

6) Я также пытаюсь проверить, работает ли это:

 > onUpdateItem = (i, product, prod) => { 
    >         let newProd = product.stock;
    >             this.setState({
    >             chosenSize: product.map(el => (el._id === prod._id ? Object.assign({}, el, el.stock -= 1) : el))
    >         }); 
    >          
    >       };

7) Мне нужно отфильтровать элементы после этого, но у меня не запущено событие для этой функции. Я такзастрял мне нужна помощь :(. Я был бы признателен за любую помощь. Эти функции работали только для электроннойxtent, но либо они не обновляют количество впоследствии.

8) Я хочу, чтобы объект обновлялся до чего-то подобного после каждого клика.

3: {_id: "5d903adb01cdab06932b5563", 
size: 4.5, 
stock: 30,
quantity: 1
}

to 

3: {_id: "5d903adb01cdab06932b5563", 
size: 4.5, 
stock: 29,
quantity: 2
}

to

3: {_id: "5d903adb01cdab06932b5563", 
size: 4.5, 
stock: 28,
quantity: 3
}

Не добавляя новый объект в мой массив.

Пожалуйста, помогите! !!

Кстати, и мои извинения, у меня есть песочница для кода, и код находится в файле страницы продукта. По какой-то причине, это дает мне странную ошибку, и я не могу показать, что я хочу, но вот песочница для кода, если это вообще помогает: codesandbox.io / s / mystifying-roentgen-7mp0t