CODEWITHSUNDEEP
javascriptarraysreactjs
3bag
3bag

Reputation: 25

How to pass array items through state

I am making a card game and want the playCard to contain both previous and additional cards inside the array. Currently when I try to use pop or splice from player hand it will take those cards from the player hand array and put them in the playCard array but when player2 tries to add to the playCard array it overwrites it and only has player2 card inside. This is how I am creating the cards and dealing them:

  this.state = {
            deck: [],
            player1: [],
            player2: [],
            player3: [],
            player4: [],
            playCard: [],

        }

        this.makeCards(); 
        this.shuffle();

    }

    makeCards = () => {
        const suits = ['Hearts', 'Spades', 'Clubs', 'Diamonds']
        const values = ['Ace', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'Jack', 'Queen', 'King']


        for (let suit in suits){
            for (let value in values) {
                this.state.deck.push(<span className='cards' key={value+suit}>{values[value]}</span>);
            }
        }

        return this.deck
    }

    deal = () => {
            this.setState({ player1: this.state.deck.filter((cards, index) => {
                    return index < 13 ? cards : null
                }) 
            }) 
            this.setState({ player2: this.state.deck.filter((cards, index) => {
                    return index >= 13 && index < 26 ? cards : null
                }) 
            }) 
            this.setState({ player3: this.state.deck.filter((cards, index) => {
                    return index >= 26 && index < 39 ? cards : null
                }) 
            }) 
            this.setState({ player4: this.state.deck.filter((cards, index) => {
                    return index >= 39 && index <= 52 ? cards : null
                }) 
            }) 
    }

choseCard function places the first card in player1 array to the playCard, but when player2turn happens it changes to the one card from the player2 array.

 choseCard(){
        this.setState(() => ({playCard: this.state.player1.splice(0,1)}))

    }
    player2turn() {

        this.setState(() => ({playCard: this.state.player2.splice(0,1)}))
        //I need to filter player2 array to find card value in playCard
        //if it has that then push to this.state.playCard
        //Player 3 sorts through array to find card etc....
    }

I understand there is no filtering happening now I just want player2 to add to the playCard array. How do I do that while still taking the cards from the player array?

Upvotes: 2

Views: 101

Answers (2)

Andrew Korin
Andrew Korin

Reputation: 314

this.setState(({ playCard, player2 }) => {
  return {
   playCard: [...playCard, ...player2.slice(0, 1)],
   player2: [...player2.slice(1, player2.length - 1)],
  };
});

Combine the previous state with the new one and don't mutate it. If you need to change player2 also, just create a new array based on prev state without the first card.

Upvotes: 1

ageoff
ageoff

Reputation: 2828

You should be using a copy of the state value to manipulate. Otherwise you will directly manupilate the arrays. Try something like this. It will create a copy. Manpulate the array and then place them back in state.

choseCard(){
  let player1 = [ ...this.state.player1 ]
  let playCard = player1.splice[0,2]
  this.setState(() => ({player1, playCard}))
}
player2turn() {
  let player1 = [ ...this.state.player1 ]
  let playCard = [ player1.pop() ]
  this.setState(() => ({player1, playCard}))
  //I need to filter player2 array to find card value in playCard
  //if it has that then push to this.state.playCard
  //Player 3 sorts through array to find card etc....
}

Upvotes: 1

Related Questions