title: Invoking parent function with instance from child in Reactjs
body: <p>I have two components, Parent component creates the a dom using child component. Finally more and two child component is created. </p>
  
  <p>While creating a child component a <strong>Click Event</strong> that is declared in parent is passed as props. I expect the child to evoke the function with its instance.</p>
  
  <p>But the problem I face is when the click event evokes from the child; The instance will be from the last child. </p>
  
  <p>Please have a look on the code and let me know where am I going wrong</p>
  
  <pre><code>    var AccordionControl = React.createClass({
  
      handleClick: function (event) {
          event.preventDefault();
          this.refs["accordionHeaderComponent"].toggleHeaderDisplay(true);
      },
  
  
      createMenuElement: function (menuContentProps, index) {
          var boundClick = this.handleClick.bind(this, index);
  
          var headerContent = &lt;MenuHeader key = {index}
          clickEvent = {boundClick}
          ref = "HeaderComponent"
          menuHeaderProps = {menuItemProps}
          /&gt;;
       },
  
      render: function(){
                  for(var index=0; index&lt;menuData.length; index++) {
                         wrapperContent.push(this.createMenuElement(menuData[index],index));
                  }
                  return wrapperContent;
      }})
  
      var MenuHeader = React.createClass({
      render: function () {
        var menuHeaderProps = this.props.menuHeaderProps;
        return  &lt;div onClick={this.props.clickEvent} &gt; &lt;/div &gt;
      }
  })
  </code></pre>