setState not working for array reactjs

Question

I have component Inbox and having checkbox in it... But It works on third click... does not work on first and second click... setState works perfect but it does't re-render after setState

class Inbox extends PureComponent {
  constructor(props){
    this.state = {
      checked: [true]
    }
  }

  updateCheck(i, convId) {
    const state = this.state.checked
    state[i] = !state[i]
    this.setState(state)
  }

  render() {
    return (
       <input type="checkbox" checked={this.state.checked[i]} onClick={() => this.updateCheck(i, conv._id)}/>
    )
  }
}

It seems to work, isn't it? jsfiddle.net/qyvLy3ur/1

Dario
– Dario

2018-05-01 12:46:51 +00:00
Commented May 1, 2018 at 12:46 — Dario
– Dario, Commented May 1, 2018 at 12:46

Shubham Khatri · Accepted Answer · 2018-05-01 14:58:32Z

1

You are not really updating the state correctly. setting state like

this.setState(state, () => {
  console.log(this.state, '787878787878778787')
})

does not update the checked state using state but adds keys with array indices to state like

{0: true, 1: false, conversationId: '', checked: [true, false]};

You are instead mutating the checked state yourself using

state[i] = !state[i]

To update the state correctly, you would write

updateCheck(i, convId) {
    const checked = [...this.state.checked]
    checked[i] = !checked[i]
    this.setState({ checked }, () => {
      console.log(this.state, '787878787878778787')
    })
 }

The problem in your approach arises because you mutate the original state directly, subsequent setState calls may replace the original change and hence you see that behaviour.

According to documentation

Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

Working demo

edited May 1, 2018 at 14:58

answered May 1, 2018 at 13:07

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

Ashh Over a year ago

hey... It works... but what difference does this line make [...this.state.checked]

Collectives™ on Stack Overflow

setState not working for array reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related