How to add an object to an array on the first click and update one of its values with every click made afterwards

Question

I am working on a React shopping cart and I am trying to accomplish the following based on an array that I will present after I explain my issues:

1) I am trying to check if the size that the client is requesting is available.

2) If it is not available I want to run a function that will:

2A) Add 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 any more and I want to increase a new element that I want to call "quantity" by one.

3) This is my current array of sizes:

[ 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) These are the functions that I am running:

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

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
            }))

        }
    }

and

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

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) I want the object to update to something like this after each click.

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 }

This is the code sandbox for this project although for whatever reason it is not rendering my components anymore. The code is in the ProductPage file codesandbox.io/s/mystifying-roentgen-7mp0t .

Edit

My apologies, the code sandbox now works, you just have to click on one of the items and it will take you to the product page http://codesandbox.io/s/mystifying-roentgen-7mp0t

Answer 1

You should use import { Link } from "react-router-dom"; to make the Link work in Product.js . I just made the changes to the code sandbox