javascript - Invoking parent function with instance from child in Reactjs -

i have 2 components, parent component creates dom using child component. more , 2 child component created.

while creating child component click event declared in parent passed props. expect child evoke function instance.

but problem face when click event evokes child; instance last child.

please have on code , let me know going wrong

    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 = <menuheader key = {index}         clickevent = {boundclick}         ref = "headercomponent"         menuheaderprops = {menuitemprops}         />;      },      render: function(){                 for(var index=0; index<menudata.length; index++) {                        wrappercontent.push(this.createmenuelement(menudata[index],index));                 }                 return wrappercontent;     }})      var menuheader = react.createclass({     render: function () {       var menuheaderprops = this.props.menuheaderprops;       return  <div onclick={this.props.clickevent} > </div >     } }) 

i got solution :) problem here using "refs" string inside loop , getting on written following component in loop.

so last element replaced on call. if "refs" replaced dynamic string ref={"headercomponent"+index} have collection of components choose :)

then var componentkey = "accordionheadercomponent1"; this.refs[componentkey ].toggleheaderdisplay(true);