How to update state of an array in reactjs

Question

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 ?

@OliverCharlesworth I see. do you know whats a way to update it ? — N Sharma
– N Sharma, Commented Jun 18, 2017 at 13:52

Mayank Shukla · Accepted Answer · 2017-06-18 14:05:09Z

1

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

edited Jun 18, 2017 at 14:05

answered Jun 18, 2017 at 13:59

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

3 Comments

N Sharma Over a year ago

What if I was not updating complete visibility array then do i need to clone then how to do ?

Mayank Shukla Over a year ago

in that case first create a copy, use item index to update the specific value then update the state, like this: let visibility = this.state.visibility.slice(); visibility[item_index] = value; this.setState({visibility})

N Sharma Over a year ago

Thanks a lot Mayank +1 :)

xtofl · Accepted Answer · 2017-06-18 16:33:21Z

1

By the way,

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

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

answered Jun 18, 2017 at 16:33

xtofl

41.7k13 gold badges112 silver badges203 bronze badges

2 Comments

N Sharma Over a year ago

How will it work ? can you please explain. looks like best approach +1

xtofl Over a year ago

It maps each 'key' in an array onto 'whether computer or user chose it`.

Collectives™ on Stack Overflow

How to update state of an array in reactjs

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related