title: ReactJS onClick event inside map function, then call parent's function
body: <p>I have just started to work with ReactJS and I can't figure out how I can make onClick events work inside a map function, which renders a few similar elements.
  When I am not using onClick={this.someMethodName} in the child elements, everything is working fine, so I am guessing the 'this' keyword no longer refers to the parent.</p>
  
  <p>Here is my code, which renders a simple menubar:</p>
  
  <pre><code>var SupplierBarComponent = React.createClass({
  doSomething: function () {
      console.log("aaaaaaaah");
  },
  
  render: function() {
  
      const suppliers = this.props.data.map(function(supplier){
          return (
              &lt;option onClick={this.doSomething} key={supplier.id}&gt;{supplier.name}&lt;/option&gt;
          );
      }, this);
  
      return(
          &lt;div&gt;{suppliers}&lt;/div&gt;
      );
  
  }
  </code></pre>
  
  <p>How can I make it work?
  I have read a few similar questions*, but their solutions didn't work for me, or I couldn't make them work.</p>
  
  <p>*:
  <a href="https://stackoverflow.com/questions/34938026/react-onclick-inside-map-then-change-data-in-another-sibling-component">React onClick inside .map then change data in another sibling component</a>
  <a href="https://stackoverflow.com/questions/30148827/this-is-undefined-inside-map-function-reactjs">&quot;this&quot; is undefined inside map function Reactjs</a>
  <a href="https://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js">Pass props to parent component in React.js</a></p>