How Can I SetState On Two Array Elements At Once?
Solution 1:
Modify this.state.timers
with something like Array#map
that maps original array elements to new ones. Don't mutate state directly, it's the source of all evil. For example:
countDown() {
this.setState(prevState => ({
timers: prevState.timers.map(timer => ({
...timer,
time: timer.time - 1
}))
}));
}
This will map each of the timers to a new timer, without mutating state, where the new timers keep the same properties (via object spread properties) except it will change the time
property of every timer to 1 less the current time.
If object spread properties isn't supported in your environment, use Object.assign
instead:
this.setState(prevState => ({
timers: prevState.timers.map(timer =>
Object.assign(
{},
timer,
{ time: timer.time - 1 }
)
)
}));
This will do the same exact thing above, it will copy the properties from timer
into an empty object {}
(preventing mutation), then overriding the time
property and decrementing it. It's just a more verbose version if your platform doesn't support object spread properties.
Also, consider passing timers
as a prop, not as an array outside the class. Restrict variables to their narrowest scope possible.
Solution 2:
Alright first of all mutating the state is not a good idea, it can lead to unexpected side effects that can give you a real headache down the line. It is a good practice to never mutate the state. A way to achieve what you want to without mutating the state can be as follows:
...
countDown() {
const newTimers = this.state.timers.map(t => Object.assign({}, t, { time: t.time - 1}));
this.setState({ timers: newTimers });
}
...
Post a Comment for "How Can I SetState On Two Array Elements At Once?"