How to change multiple properties of a state in react (at the same time)?

Question

I have this state in my main parent component:

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
        }
    ]
};

Now, I have some methods that change different properties of the state. E.g.:

takeCard = () => {
    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 }, () =>
            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!");
    }

};

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 setState()?

i think it is ok to have multiple set state as React will wait for event handling to finish before re-rendering. stackoverflow.com/questions/33613728/… — Akash Salunkhe
– Akash Salunkhe, Commented Oct 17, 2018 at 4:42
You might want to change the title; if I'm understanding you right you're changing multiple objects in the state, but not changing the internals of any object in the state. Which is what, to me, 'nested' implies. — Dave
– Dave, Commented Oct 17, 2018 at 4:54

Shubham Khatri · Accepted Answer · 2018-10-17 06:11:21Z

24

Its okay to call multiple setStates since React internally does batching before setState and hence will only call render once. That said, the chances of you making a mistake in writing setState such that batching ignores a change or sets incorrect value are high(for instance you may call setState twice for the same key based on the previous value and might expect a result different from what you get). Hence its recommended that you call setState once after processing all the values

    // 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;

    const playableCards = playableCards.filter(function(card) {
            return card !== openedCard;
    })


    // Change active player
    const nextPlayer = activePlayer === 0 ? 1 : 0;

    // Reset offered chips to 0
    // Reset opened card
    // Remove card from deck
    this.setState({ 
          openedCard: null,
          offeredChips: 0, 
          playableCards, 
          players: playersClone
    }, () =>
        this.calculateScore(activePlayer)
    );

answered Oct 17, 2018 at 6:11

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GD- Ganesh Deshmukh Over a year ago

Upvoted for very helpful information as:

Its okay to call multiple setStates since React internally does batching before setState and hence will only call render once.

Roopak Puthenveettil · Accepted Answer · 2018-10-17 06:06:33Z

10

you can change multiple properties of a state like this.

this.setState({ openedCard: null, offeredChips: 0, activePlayer: nextPlayer });

answered Oct 17, 2018 at 6:06

Roopak Puthenveettil

1,5052 gold badges14 silver badges28 bronze badges

Comments

Adam Gonzales · Accepted Answer · 2022-07-02 02:24:33Z

1

For functional components, the basic syntax to update more than one property at once is as follows:

function handleUserData() {
  setUserData((prevUserData) => {
    return {
      ...prevUserData,
      propertyName: theValueOrVariableHere,
      otherPropertyName: theValueOrVariableHere
    }
  })
}

answered Jul 2, 2022 at 2:24

Adam Gonzales

9688 silver badges13 bronze badges

Comments

Nitin Kumar · Accepted Answer · 2020-11-05 07:00:04Z

0

you can change multiple properties of a state like this.this.setState({value1: 0, value2: 0})

answered Nov 5, 2020 at 7:00

Nitin Kumar

11 bronze badge

Collectives™ on Stack Overflow

How to change multiple properties of a state in react (at the same time)?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related