javascript - react onClick not triggering function -

i have child component generates list elements contain image , 2 icons within tag.

return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onclick={this.showbild} href="#"><i classname="fa fa-eye"></i></a><a href="#"><i classname="fa fa-trash-o"></i></a></li> 

this return return of map function of prop has been passed parent component.

somehow onclick event doesn't trigger showbild function.

did miss ?

heres whole react code including parent , child component (showbild class can ignored)

<script type="text/jsx">   var bilder = react.createclass({     getinitialstate: function() {       return {         data:[                 ['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],                 ['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],                 ['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],                 ['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg'],                 ['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'name.jpg']             ],         currentpic:[],         display:'showbild clearfix dn'       };     },     bild: function(){      },     render: function() {       return (         <div>           <singlebild data={this.state.data} chosenbild={this.bild} />           <bilddetail data={this.state.currentpic} display={this.state.display} />         </div>       );     }   });    var singlebild = react.createclass({     getinitialstate: function() {       return {         bild:[]       };     },     showbild: function(e){       e.preventdefault();       alert("yolo");       this.props.chosenbild(this.state.bild);     },     render: function() {       var displaybild = function(bild){              return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onclick={this.showbild} href="#"><i classname="fa fa-eye"></i></a><a href="#"><i classname="fa fa-trash-o"></i></a></li>       };       return (         <ul classname="dashboardul bilder clearfix">           <h2>gemeldete bilder:</h2>           {this.props.data.map(displaybild)}         </ul>       );     }    });    var bilddetail  = react.createclass({      render: function() {       return (         <div classname={this.props.display}>           <img src={this.props.data[1]} alt="" />           <ul>             <li><a href="#"><i classname="fa fa-trash-o"></i></a></li>             <li><a href="#"><i classname="fa fa-ban"></i></a></li>           </ul>         </div>       );     }    });     react.render(<bilder />, document.getelementbyid('bilder')); </script> 

in render method of bilddetail, should reference this keyword or bind it. example:

 render: function() {   var self = this;   var displaybild = function(bild){          return <li>...<a onclick={self.showbild} ....</a></li>   };   return (     ....   ); } 

or can bind :

render: function() {   var displaybild = function(bild){          return <li>...<a onclick={this.showbild} ....</a></li>   }.bind(this);   return (     ....   ); }