title: How to change multiple properties of a state in react (at the same time)?
body: <p>I have this state in my main parent component: </p>
  
  <pre><code>this.state = {
      playableCards: [],
      openedCard: null,
      offeredChips: 0,
      activePlayer: 0, // first player is 0, second player is 1
      players: [
          {
              name: "player1",
              remainingChips: 11,
              cards: [],
              score: null
          },
          {
              name: "player2",
              remainingChips: 11,
              cards: [],
              score: null
          }
      ]
  };  
  </code></pre>
  
  <p>Now, I have some methods that change different properties of the state. E.g.:</p>
  
  <pre><code>takeCard = () =&gt; {
      const {
          activePlayer,
          players,
          playableCards,
          offeredChips,
          openedCard
      } = this.state;
  
      if(openedCard) {
  
          // Add card to active player
          let playersClone = [...players];
          playersClone[activePlayer].cards = [
              ...playersClone[activePlayer].cards,
              openedCard
          ];
  
          // Add any offered chips to active player
          playersClone[activePlayer].remainingChips += offeredChips;
  
          this.setState({ players: playersClone }, () =&gt;
              this.calculateScore(activePlayer)
          );
  
          // Remove card from deck
          this.setState({
              playableCards: playableCards.filter(function(card) {
                  return card !== openedCard;
              })
          });
  
          // Change active player
          const nextPlayer = activePlayer === 0 ? 1 : 0;
          this.setState({ activePlayer: nextPlayer });
  
          // Reset offered chips to 0
          this.setState({ offeredChips: 0 });
  
          // Reset opened card
          this.setState({ openedCard: null });
  
      } else {
          console.log("Open a card first!");
      }
  
  };
  </code></pre>
  
  <p>As you can see, there are many properties that are being changed just by a single  click event (this method is attached to a click event). I am wondering whether is this the proper way of doing it or should I combine all the <code>setState()</code>?</p>