Data is not binded after Object.keys iteration?


(Dávid Ďurčo) #1

Hi guys, I have problem with data binding after iteration in render() method.

I have some dummy data in state

this.state = {
  Items: {
    Item1: {
      id: 0,
      counter: 0,
      name: Item1
    },
    Item2: {
      id: 0,
      counter: 0
      name: Item2
    },
  },
}

Im iterating over Items in render() method. And item has button with on click function to increase counter. But only state is changing after click. Here is loop

{
 Object.keys(this.state.items).map((e, i) => {
    let item = this.state.items[e];
    return (
      <Col sm={4} key={i}>
        <button onClick={() => handleIncreaseCounter(item.name)}/>
        <p>{item.counter}</p>
      </Col>
    )
  })
}

handleAddClick(itemName){
  this.state.Items[itemName].counter =  this.state.Items[itemName].counter + 1;
}

When i click on button to increase counter, state is changed, but nothing happens on screen in html… Any ideas?


(Eric Masiello) #2

Can you reply with your entire component code? It’ll make it easier to comment.


(Dávid Ďurčo) #3

Actually, I solved it by myself. I just shouldn’t have mutated state directly

Thanks