CODEWITHSUNDEEP
reactjs
N Sharma
N Sharma

Reputation: 34517

How to update state of an array in reactjs

I have this array of visibility of my buttons. I am saving state of those buttons in a state.

this.state = {
  score: 0,
  status: "",
  userSelected: "",
  computerSelected: "",
  visibility: [true, true, true]
};

I want to update value of visibility array index wise. I tried to do like below but it doesn't update, it keep adding new elements in an array instead of update value of an array.

var arrayvar = this.state.visibility.slice();
if (
  (user === "Rock" && computer === "Paper") ||
  (user === "Paper" && computer === "Rock")
) {
  arrayvar.push(true, true, false); // here set 1st and 2nd to true and 3rd to false
} else if (
  (user === "Rock" && computer === "Scissors") ||
  (user === "Scissors" || computer === "Rock")
) {
  arrayvar.push(true, false, true);
} else if (
  (user === "Paper" && computer === "Scissors") ||
  (user === "Scissors" || computer === "Paper")
) {
  arrayvar.push(false, true, true);
} else if (user === "Rock" && computer === "Rock") {
  arrayvar.push(true, false, false);
} else if (user === "Paper" && computer === "Paper") {
  arrayvar.push(false, true, false);
} else if (user === "Scissors" && computer === "Scissors") {
  arrayvar.push(false, false, true);
}
this.setState({ visibility: arrayvar });

Can anyone suggest how to do this in reactjs ?

Upvotes: 0

Views: 445

Answers (2)

xtofl
xtofl

Reputation: 41519

By the way,

var arrayvar = ["Rock", "Paper", "Scissors"]
    .map(
        k => computer === k || user === k
    );

May well replace the whole if-then cascade you wrote.

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104529

array.push will always push the new values in array, it will not update the existing values.

You need to write it like this:

arrayvar = [];                     //create a variable, don't need to copy the state values here


arrayvar = [true, true, false];    // assign new array inside conditions

this.setState({
    visibility: arrayvar           //then update the state visibility array
})

You don't need to create a copy of state array because, you are updating the whole array not the specific value of the array, simply create a variable:

arrayvar = [];

Full code:

var arrayvar = [];
if ( (user === "Rock" && computer === "Paper") || (user === "Paper" && computer === "Rock")) {
    arrayvar = [true, true, false];
} else if ((user === "Rock" && computer === "Scissors") || (user === "Scissors" || computer === "Rock")) {
    arrayvar = [true, false, true]
} else if ((user === "Paper" && computer === "Scissors") || (user === "Scissors" || computer === "Paper")) {
    arrayvar = [false, true, true];
} else if (user === "Rock" && computer === "Rock") {
    arrayvar = [true, false, false];
} else if (user === "Paper" && computer === "Paper") {
  arrayvar = [false, true, false];
} else if (user === "Scissors" && computer === "Scissors") {
  arrayvar = [false, false, true];
}
this.setState({ visibility: arrayvar });

Upvotes: 1

Related Questions