CODEWITHSUNDEEP
arraysreactjsobjectstatesetstate
Austin
Austin

Reputation: 79

React Push One State Array into Another

In essence, I have this working, I am building out a game component to allow users to select items they want to purchase, they get pushed into a pending array and then when they wish to check out I am pushing those objects from the pending array into the purchased array.

But something very odd is happening after that, the arrays look like it worked properly the pending array is empty and the purchased array has the correct items within it. The problem comes once I try and click a new item to put into the pending array if its the same item that is in the purchased array it alters the counter there.

I have been toying with different ways to try and fix this, but have no idea how it's affecting the purchased array without me setting the state again.

This is my code so far for operating this vendor functionality.

handleMerchantEquipment(item) {
    let pending = this.state.merchantPending;
    let found = Equipment.find(el => item === el.Name);
    let check = pending.find(el => el.Name === found.Name);
    if (!check) {
        pending.push(found);
    }
    else {
        var foundIndex = pending.findIndex(el => el.Name === check.Name);
        check.Count +=1;
        pending[foundIndex] = check;

    }
    let CP = [0];
    let SP = [0];
    let GP = [0];
    let PP = [0];
    pending.map(item => {
        let cost = item.Cost * item.Count;
        if (item.Currency === "CP") {
            CP.push(cost);
        }
        else if (item.Currency === "SP") {
            SP.push(cost);
        }
        else if (item.Currency === "GP") {
            GP.push(cost);
        }
        else if (item.Currency === "PP") {
            PP.push(cost);
        }
    });

let purchased = [];
        this.state.merchantPending.map(item => {
            purchased.push(item)
        });
this.setState({
            yourCP: totalCP,
            yourSP: totalSP,
            yourEP: totalEP,
            yourGP: totalGP,
            yourPP: totalPP,
            purchased: purchased,
            merchantPending: [],

        });

Some of the code is related to the currency exchange which his working fine.

I have also tried the ... to update the array but the issue persisted with it updating the Count in the purchased state.

Upvotes: 1

Views: 1520

Answers (2)

Dinesh Pandiyan
Dinesh Pandiyan

Reputation: 6299

You are mutating state. You should not mutate state in React. You should always immutably change state in React.

I think the problem lies in this line.

let pending = this.state.merchantPending;

Change it to

let pending = [...this.state.merchantPending.map(obj => ({...obj}))];

Also, if you want to iterate an array, use forEach instead of map. map returns you a new array.

pending.forEach(item => {
  ...
}

Upvotes: 1

Bens Steves
Bens Steves

Reputation: 2849

What is that you want the purchasedArray to do when it encounters a duplicate entry or item? May you clarify that in your question?

If you want it to not allow duplicate items you have to first check the array to see if it contains that item. Pseudo code

if(contains) {
 render alert
 //or do something else
} else {
 purchased.push(item)
}

I am not able to comment so I will delete this when you clarify.

Upvotes: 0

Related Questions