title: React: How to know which component calls the function
body: <p>I am doing my first project using React and there is one thing I can't figure out. So I have many different <code>Type</code> components which are being set as the main component's <code>TypesPage</code> state. And when the <code>onChange</code> event happens on <code>Type</code> component I want to know which type it is in a <code>TypesPage</code> state or what index it is in a types array, so I can reupdate my <code>data</code> state.</p>
  
  <p>Inside <code>handleChange</code> function I used jQuery's grep function comparing clicked <code>Type</code> title value with all the types array, but I am sure that is not the right way to do it and it would be an overkill with huge arrays.</p>
  
  <p>Why I want to know which </p>
  
  <pre class="lang-js prettyprint-override"><code>handleChange:function(element, event){
    var typeIndex;
    $.grep(types, function(e, index){
      if(element.title === e.title){
        typeIndex = index
      }
    });
    types[typeIndex] //Now I know that this is the Type that was changed
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/5kvdywrb/2/" rel="nofollow">Fiddle</a></p>
  
  <pre class="lang-js prettyprint-override"><code>var types = [
    {
      type_id: 1,
      type_name: "Logo"
    },
    {
      type_id: 2,
      type_name: "Ad"
    },
    {
      type_id: 3,
      type_name: "Catalog"
    },
  ];
  
  var Type = React.createClass({
    render: function() {
      return( 
          &lt;li&gt;
          &lt;input type="text" value={this.props.title}
              onChange={this.props.handleChange.bind(null, this.props)} /&gt;
        &lt;/li&gt;
      );
    }
  });
  var TypesContainer = React.createClass({
    render: function() {
      var that = this;
        return(
          &lt;ul&gt;
              {this.props.data.map(function(entry){
              return(
                  &lt;Type
                  key={entry.type_id}
                  title={entry.type_name}
                  handleChange={that.props.handleChange}
                /&gt;
              );
            })}
          &lt;/ul&gt;
        );       
    }
  });
  var TypesPage = React.createClass({
    getInitialState: function(){
      return({data: types})
    },
    handleChange: function(element, event){
  
    },
    render: function() {
      return(
          &lt;TypesContainer
              data={this.state.data}
          handleChange={this.handleChange}
        /&gt;
      );
    }
  });
  
  ReactDOM.render(
    &lt;TypesPage /&gt;,
    document.getElementById('container')
  );
  </code></pre>