React component not re-rendering when updating state

Question

I think you have a better solution to this problem: I have a file containing an array of my cat objects:

var categories = [
  {
    "id": 1,
    "name" : "Faktury",
    "selected" : false
  },
  {
    "id": 2,
    "name" : "Telefony",
    "selected" : false
  },
  {
    "id": 3,
    "name" : "Komputery",
    "selected" : false
  },
  {
    "id": 4,
    "name" : "Rachunkowośc",
    "selected" : false
  },
  {
    "id": 5,
    "name" : "Finanse",
    "selected" : false
  }
];

I have:

<ul className="category">
  {this.state.categories.map((item,index) =>
    <li onClick={()=>this.filterCategory(item,index)} key={item.id} className={item.selected? 'active' : ''}>{item.name}< /li>
  )}
</ul>

My filterCategory function:

filterCategory(item,index) {
  this.state.categories[index].selected = !this.state.categories[index].selected;
  this.forceUpdate();
}

Do you know how I can implement this without using forceUpdate()? I read on Stack that using this.forceUpdate() should be avoided.

Answer 1

Do not modify the status directly

Use the setState method to change the state.

Answer 2

Using setState will automatically trigger re-rendering, so do not modify the state directly, but use setState to update the state.

filterCategory(item,index){
   var categories = [...this.state.categories];
   categories[index].selected = !categories[index].selected;
   this.setState({categories})
}

According to documentation: