react setState update array of objects

Question

I have the below code where I am trying to update setState with few properties modified in array of objects

onClick(index) {
    let tmp = this.state.daysOfWeek;
    tmp[index].active = !tmp[index].active;
    if (tmp[index].active === true) {
      tmp[index].className = "selectedDay";
    } else {
      tmp[index].className = "remSelectedDay";
    }

    this.setState({ daysOfWeek: [...this.state.daysOfWeek, tmp]})
  }

Here tmp is modified array of objects. If I use spread operator then the arry of objects are concatinated wiht tmp.

How could I update the current state with array of objects ?

Loop through them using map and then return updated array. — Randall
– Randall, Commented Sep 20, 2019 at 10:07

Clarity · Accepted Answer · 2019-09-20 10:20:03Z

1

A combination of map and the functional form of setState will allow you to correctly update the array without directly modifying the state:

onClick(index){
  this.setState(state => {
    return {
      daysOfWeek: state.daysOfWeek.map((day, i) => {
        if (i === index) {
          return {
            ...day,
            active: !day.active,
            className: day.active ? 'remSelectedDay' : 'selectedDay'
          }
        }
        return day;
      })
    }
  })
}

answered Sep 20, 2019 at 10:20

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

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

Comments

Medet Tleukabiluly · Accepted Answer · 2019-09-20 10:11:05Z

0

onClick (index) {
    const { daysOfWeek } = this.state        // for example: [1, 2, 3, 4, 5], index = 1
    this.setState({
        daysOfWeek: [
            ...daysOfWeek.slice(0, index),               // [1]
            {
                ...daysOfWeek[index],                    // this is 2
                active: !daysOfWeek[index],
                className: daysOfWeek[index] ? 'selectedDay' : 'remSelectedDay'
            },
            ...daysOfWeek.slice(index + 1)               // [3, 4, 5]
        ]
    })
}

answered Sep 20, 2019 at 10:11

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

Collectives™ on Stack Overflow

react setState update array of objects

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related