Remove first item of array in react state

Question

I know how to do this but trying this way and not sure why it wont work?

  drawCard = () => {
    const deck = this.state.cards;
    deck.shift();
    console.log(deck, 'deck'); //this is correctly logging one less everytime
    this.setState({cards: deck})
  }

cards is just an of objects

so even though the function is being called and the console log is working, why is it not updating state?

(console.log(state.cards.length) always returns 3)

Answer 1

Don't use methods that mutate the state (for instance, Array#shift). You could instead use Array#slice to return a shallow copy of a portion of the array:

drawCard = () => {
  this.setState({ cards: this.state.cards.slice(1) })
}