title: Problem with indexOf in an array of objects. React app
body: <p>I'm having a following situation where I want to know the indexOf value to be able to use that knowledge later on in the code. How ever, I've tried multiple different ways to get the value and I don't seem to get it right. In the code below I've tried a few different ways that I found searching Stackoverflow. All of them return -1 so far, meaning that there is either something wrong with my code or some other issue I'm not able to find at the moment. </p>
  
  <p>FYI, selectedGroup is an array with objects inside, just like this:
  <code>[{label: "somelabel", value: 100}]</code>
  and there can be many of them, depends on the user.</p>
  
  <p>code: </p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  
  const GroupButtonMaker = ({ selectedGroup}) =&gt; {
    const [newButtons, setNewButtons] = useState([]);
    console.log(newButtons);
  
    useEffect(() =&gt; {
      const createButtons = () =&gt; {
        setNewButtons(
          selectedGroup.map(item =&gt; {
            return (
              &lt;button
                id={item.value}
                className={'btn green micro'}
                key={item.value}
                onClick={event =&gt; btnHandler(event)}
              &gt;
                {item.label}
              &lt;/button&gt;
            );
          })
        );
      };
      createButtons();
    }, [selectedGroup]);
  
    const btnHandler = event =&gt; {
  //here at the handler I'm trying multiple different ways to find indexOf as a test. No luck so far. 
      const eventID = event.currentTarget.id;
      let currentTargetIndex = newButtons
        .map(item =&gt; item.value)
        .indexOf(eventID);
      console.log(currentTargetIndex);
      console.log(newButtons.findIndex(x =&gt; x.value === eventID));
    };
  
    Array.prototype.indexOfObject = function arrayObjectIndexOf(property, value) {
      for (var i = 0, len = this.length; i &lt; len; i++) {
        if (this[i][property] === value) return i;
      }
      return -1;
    };
  // here i've hardcored one value as a test to see if it works but it didn't so far.
    console.log(newButtons.indexOfObject('value', 107));
  
    const idx = newButtons.reduce(function(cur, val, index, eventID) {
      if (val.value === eventID &amp;&amp; cur === -1) {
        return index;
      }
      return cur;
    }, -1);
    console.log(idx);
  
    return &lt;ul&gt;{newButtons.map(item =&gt; item)}&lt;/ul&gt;;
  };
  export default GroupButtonMaker;
  </code></pre>
  
  <p>Thank you beforehand for any suggestions to my current problem. Hopefully I've managed to describe the problem in a way that makes it solveable. If not, please ask and I'll try to provide an answer. </p>