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(}/>

  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