React: How to update object in array map

Question

I'm trying to update the value of an array when a button is clicked. But I can't figure out how to do so using this.setState.

export default class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };
  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <div>
          {counter.name}, {counter.value}
          <button onClick={/* increment counter.value here */}>+</button>
        </div>
      );
    });
  }
}

How do I increment counter.value when the button is clicked?

devserkan · Accepted Answer · 2019-05-17 12:39:45Z

Update

Since this is the accepted answer now, let me give another optimal method after @Auskennfuchs' comment. Here we use Object.assign and index to update the current counter. With this method, we are avoiding to use unnecessary map over counters.

class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };

  increment = e => {
    const {
      target: {
        dataset: { i }
      }
    } = e;
    const { counters } = this.state;
    const newCounters = Object.assign(counters, {
      ...counters,
      [i]: { ...counters[i], value: counters[i].value + 1 }
    });
    this.setState({ counters: newCounters });
  };

  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <div>
          {counter.name}, {counter.value}
          {/* We are using function reference here */}
          <button data-i={i} onClick={this.increment}>
            +
          </button>
        </div>
      );
    });
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

As an alternative method, you can use counter name, map over the counters and increment the matched one.

class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };

  increment = name => {
    const newCounters = this.state.counters.map(counter => {
      // Does not match, so return the counter without changing.
      if (counter.name !== name) return counter;
      // Else (means match) return a new counter but change only the value
      return { ...counter, value: counter.value + 1};
    });

    this.setState({counters: newCounters});
  };


  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <div>
          {counter.name}, {counter.value}
          <button onClick={() => this.increment(counter.name)}>+</button>
        </div>
      );
    });
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

If you use the handler like above it will be recreated on every render. You can either extract it to a separate component or use datasets.

class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };

  increment = e => {
    const {target} = e;
    const newCounters = this.state.counters.map(counter => {
      if (counter.name !== target.dataset.name) return counter;
      return { ...counter, value: counter.value + 1};
    });
    this.setState({counters: newCounters});
  };


  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <div>
          {counter.name}, {counter.value}
          { /* We are using function reference here */ }
          <button data-name={counter.name} onClick={this.increment}>+</button>
        </div>
      );
    });
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

Although this is the accepted answer, the implementation is not optimal. The second loop through the whole array inside of increment isn't needed, because the correct index and counter object can be provided to the function itself.
@Auskennfuchs, I've added an alternative method after your comment. Yes, mapping is not needed here. But, I would choose Zdenek F's answer if I were the OP. Since extracting the logic is more optimal I think. This is why I upvoted that answer before OP accepted mine.

Zdenek F · Accepted Answer · 2019-05-16 20:58:33Z

Consider refactoring the actual counter into its own component. That simplifies the state management as it encapsulates the component responsibility. Suddenly you don't need to update a nested array of objects, but you update just a single state property:

class App extends React.Component {
  state = {
    counters: [{ name: "item1", value: 0 }, { name: "item2", value: 5 }]
  };
  render() {
    return this.state.counters.map((counter, i) => {
      return (
        <Counter name={counter.name} count={counter.value} />
      );
    });
  }
}

class Counter extends React.Component {
  state = {
    count: this.props.count
  }

  increment = () => {
    this.setState({
      count: this.state.count+1
    })
  }

  render() {
      return (
        <div>
          {this.props.name}, {this.state.count}
          <button onClick={this.increment}>+</button>
        </div>
      );
  }
}

ReactDOM.render( < App / > , document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Jonas Wilms · Accepted Answer · 2019-05-16 20:47:00Z

0

You could use the i that you already have to map the counters to a new array, replacing the target item with an updated count:

  () => this.setState(({ counters }) => ({ counters: counters.map((prev, i2) => i === i2 ? { ...counter, count: counter.count + 1 } : prev) }))

answered May 16, 2019 at 20:47

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Comments

Federkun · Accepted Answer · 2019-05-16 20:53:19Z

0

You can have an handler that will map counters and update the corresponding counters item of the button clicked. Here we take i from the parent scope, and compare it to find the right item to change.

<button onClick={() => {
    this.setState(state => ({
        counters: state.counters.map((item, j) => {
            // is this the counter that I want to update?
            if (j === i) {
                return {
                    ...item,
                    value: item.value + 1
                }
            }

            return item
        })
    }))
}}>+</button>

answered May 16, 2019 at 20:53

Federkun

37.2k8 gold badges82 silver badges93 bronze badges

Comments

Ladi Adenusi · Accepted Answer · 2019-05-16 20:54:53Z

0

You can create a click handler like this

handleClick = (index) => {
  this.setState(state => {
    const obj = state.counters[index]; // assign the object at the index to a variable
    obj.value++; // increment the value in the object
    state.counters.splice(index, 1); // remove the object from the array
    return { counters: [...state.counters, obj] };
  });
}

Call it like this... <button onClick={() => handleClick(i)}>

It's possible to make this shorter. Just wanted to explain how you could go about it

edited May 16, 2019 at 20:54

answered May 16, 2019 at 20:49

Ladi Adenusi

1,0827 silver badges11 bronze badges

Comments

Auskennfuchs · Accepted Answer · 2019-05-16 21:33:37Z

0

With Array.splice you can replace an entry inside of an array. This will return a new array with the replaced value:

    const {counters}= this.state
    return counters.map((counter, i) => (
        <div key={i}>
          {counter.name}, {counter.value}
          <button onClick={() => this.setState({
               counters: counters.splice(i, 1, {
                   ...counter,
                   value: counter.value+1,
               }
             )})}>+</button>
        </div>
   ));

Also it's best practise to give every Fragment inside of a loop it's own unique key. And you can get rid of the return, because there's only the return inside of the map function.

edited May 16, 2019 at 21:33

answered May 16, 2019 at 20:57

Auskennfuchs

1,74712 silver badges21 bronze badges

Collectives™ on Stack Overflow

React: How to update object in array map

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related