How to use React setstate method with an array of objects and prevState?

Question

I have a state configured in React that is an array of objects:

state = {
        metric: [{name: "", type:"", reward: false}],
    }

I want the reward attribute to be updated (from false-> true or true->false) when a particular checkbox is checked, which I wrote an onSelectedChange function that uses a particular index in the array as a parameter:

onSelectedChange = (idx) => {
        this.setState((prevState) => ({
            metric:{
                [idx]: {
                    ...prevState.metric[idx],
                    reward: !prevState.metric[idx].reward
                }
            }
        }))
    }

But after this function runs, something must have messed up the state configuration because a later function that uses metric.map(val, idx) fails.

Example of what I expect after the function call:

Before:

state = {
        metric: [{name: "latency1", type:"counter", reward: false},
                 {name: "latency2", type:"counter", reward: false}]
    }

After calling onSelectedChange(1):

state = {
        metric: [{name: "latency1", type:"counter", reward: false},
                 {name: "latency2", type:"counter", reward: true}]
        }

If you want to affect the first object. You should use it this way. onSelectedChange(0) — Minan
– Minan, Commented Mar 25, 2020 at 22:27
@Minan Right, but my example is affecting the 2nd element in the metric array, which has index 1. — avhhh
– avhhh, Commented Mar 25, 2020 at 22:32

serpil · Accepted Answer · 2020-03-25 22:32:54Z

3

You are creating metric as an array but assigning to an object in your change function. If you want to change state by the index of the item in the array, you can use spread operator to copy your state and assign it to a new variable, update it and pass this to setState in your onSelectedChange function. e.g:

let metric = [...this.state.metric];
metric[idx] = { ...metric[idx], reward: true };
this.setState({
  metric
});

answered Mar 25, 2020 at 22:32

serpil

662 bronze badges

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

3 Comments

avhhh Over a year ago

How would you use prevState in this case to update the reward attribute? Since I would want to swap between true and false with every click on the checkbox.

serpil Over a year ago

you can toggle the reward value with: metric[idx] = { ...metric[idx], reward: !metric[idx].reward};

avhhh Over a year ago

After learning a bit more about JS and React in general, this answer is much more efficient than my previously accepted one. Thank you!

Tom Corey · Accepted Answer · 2020-03-25 22:33:02Z

0

Try doing this:

onSelectedChange = (idx) => {

let newMetricArr = this.state.metric.map((metric,i) => {
    if (i === idx) {
        return {
            ...metric,
            reward: !metric.reward
        }
    }
    return metric;
})

this.setState({metric: newMetricArr})
}

answered Mar 25, 2020 at 22:33

Tom Corey

11 bronze badge

Collectives™ on Stack Overflow

How to use React setstate method with an array of objects and prevState?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related