javascript - React onClick event only triggerable once after compiling from jsx to js -

i have component builds list of images 2 buttons on each array entry.

one of 2 buttons has onclick event updates parentcomponent image shown in bigger view.

everything works in precompilex jsx version. try out "live" compiled version onclick event works once.

to make work on element need reload page.

i don't console errors. no idea error might be.

if want recreate can paste code , create div id "bilder".

i using latest react version :

<script src="https://fb.me/react-0.13.3.js"></script> <script src="https://fb.me/jsxtransformer-0.13.3.js"></script> 

heres source :

var bilder = react.createclass({   getinitialstate: function() {     return {       data:[               ['1', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild1.jpg'],               ['2', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild2.jpg'],               ['3', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild3.jpg'],               ['4', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild4.jpg'],               ['5', 'http://localhost/foodoo/app/public/imgs/aichl.jpg', 'bild5.jpg']           ],       currentpic:[],       display:'showbild clearfix dn',       displaybg:'darkbg dn'     };   },   showbild: function(e, data){     this.setstate({       currentpic: e,       display: 'showbild clearfix db',       displaybg: 'darkbg db'     });   },   hide: function(){     this.setstate({       display: 'showbild clearfix dn',       displaybg: 'darkbg dn'     });   },   render: function() {     return (       <div>         <singlebild data={this.state.data} chosenbild={this.showbild} />         <bilddetail hide={this.hide} data={this.state.currentpic} display={this.state.display} displaybg={this.state.displaybg} />       </div>     );   } });  var singlebild = react.createclass({   getinitialstate: function() {     return {       bild:[]     };   },   showbild: function(data, e){     e.preventdefault();     this.props.chosenbild(data);   },   render: function() {     var scopethis = this;     var displaybild = function(bild){          return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onclick={scopethis.showbild.bind(null, bild)} 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({   hide: function(){     this.props.hide();   },   render: function() {     var scopethis = this;     return (       <div>         <div classname={this.props.display}>           <img src={this.props.data[1]} alt="" />           <span>{this.props.data[2]}</span>           <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>         <div onclick={this.hide} classname={this.props.displaybg}></div>       </div>     );   } });  react.render(<bilder />, document.getelementbyid('bilder')); 

i think should remove mapping of data onto list nodes out of return statement in render , bind component class to map callback function.

... render: function() {   var listnodes = this.props.data.map(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>     )   }.bind(this));    return (     <ul classname="dashboardul bilder clearfix">       <h2>gemeldete bilder:</h2>       {listnodes}     </ul>   ); } 

now