title: How to increment the value of an object within state React
body: <p>So I have this component called counters where the state looks something like this</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>state = {
      counters: [
        { id: 1, value: 0 },
        { id: 2, value: 3 },
        { id: 3, value: 0 },
        { id: 4, value: 0 },
      ],
    };
    </code></pre>
  </div>
  </div>
  </p>
  <p>And I'm trying to increment the value every time a corresponding button is clicked. This is the function I wrote for it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  handleIncrement = (counter) =&gt; {
      const counters = [...this.state.counters];
      const index = counters.indexOf(counter);
      counters[index] = { ...counter };
      counters[index].value++;
      this.setState({ counters });
    };</code></pre>
  </div>
  </div>
  </p>
  <p>It doesn't work. And here are some additional observations.</p>
  <ol>
  <li>When I console.log the local counters object (copied from state.counters) it returns an additional row at the end with id: -1 and value: NaN</li>
  <li>The variable counter (thats being passed as a parameter) is from a child component. It's supposed to return 0 if the first button is clicked, 1 if the second button is clicked and so on. When I console.log it it seems to be returning the correct values.</li>
  </ol>
  <p>by the looks of it, the problem seems to lie in the line</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>const index = counters.indexOf(counter);</code></pre>
  </div>
  </div>
  </p>
  <p>As the value of index is always returned as -1.</p>