CODEWITHSUNDEEP
javascriptreactjs
Mahdi
Mahdi

Reputation: 1405

Why the full page update when i change a state?

hi I have a react app and this is my code :

this.state = {
  bars: [{
    tom1: Array(16).fill('0'),
  }],
}
tom1Click= (i, j) => {
  let bar = this.state.bars.slice();
  if(bar[i].tom1[j] === '1'){
    bar[i].tom1[j] = '0';
  }
  else
    bar[i].tom1[j] = '1';
  this.setState({bars: bar})
}

I have 16 component of Tom in my page and I want when one of them clicked that state value change to 0 or 1 but when I click on one of the Toms the whole state updated and whole page reRendered what should I do to handle this, and when I click on component just that component reRender

Upvotes: 1

Views: 388

Answers (1)

Reda Meskali
Reda Meskali

Reputation: 275

A better way to make this work is to have 2 components a parent one that will render 16 child component, the child component will have a boolean state and a click handler that will have a simple line of code setState({bar:!this.state.bar}); for example. Hope it helps!

Upvotes: 3

Related Questions