title: How to filter an array of refs
body: <p>I have an array of data that i map over and display on screen. i want to be able to do stuff to these dom elements when clicked. I've stored the refs in an array and now onclick i want to do something with the one that was clicked and something else with the rest. </p>
  
  <p>So i thought of using es6 filter to remove the current one from a new array and then iterate over them. And then i'm free to do whatever i want with the item that was clicked.</p>
  
  <p>However i can't get the filter to work. doesn't console anything. </p>
  
  <p><a href="https://codepen.io/_adamjw3/pen/MWWmGEg" rel="nofollow noreferrer">https://codepen.io/_adamjw3/pen/MWWmGEg</a></p>
  
  <pre><code>class App extends React.Component {
      constructor(props) {
          super();
      this.myRefs = [];
      this.state = {
          testData: [
              "dave",
              "pete",
              "mark"
          ]
       }
    }
  
    myActionHandler = key =&gt; {
       const selectedDomElement = this.myRefs[key];
       const filtered =  this.myRefs.filter(item =&gt; item !== item);
  
  
       filtered.forEach(function(entry) {
          console.log("all but selected ne", entry);
      });
    };
  
      render(){
          return (
              &lt;div className="container"&gt;
                  {this.state.testData.map((item, key) =&gt; {
                      return (
                          &lt;div key={key} &gt;
                              &lt;button onClick={() =&gt; this.myActionHandler(key)} ref={ref =&gt; (this.myRefs[key] = ref)} &gt;
                                  {item} 
                              &lt;/button&gt;
                          &lt;/div&gt;
                      );
                  })}
              &lt;/div&gt;
          );
      }
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>