reactjs - setInterval within onClick in React -

update: new react(and js) , playing around it. want can click on image every 10 secs or something. how do it? not sure reset isclickable.

i have this:

    var clickableimage = react.createclass({  getinitialstate: function(){     return {         isclickable: false,         counter: 0     }; },  componentdidmount: function(){      // componentdidmount called react when component      // has been rendered on page. can set interval here:     settimeout(() => {         this.setstate({             isclickable: true,         });     }, 1000);  },  handleclick: function() {     this.setstate({ counter: this.state.counter+1 });  },  render: function(){      var imgstyle = {       width: '80%',       height: '80%',       backgroundcolor: "#4ecdc4"     };      var counterstyle = {       width: '80%',       height: '80%',       backgroundcolor: "#674172"     };      const optionalonclick = this.state.isclickable ? {         onclick: this.handleclick,         isclickable: false     } : {};      return(             <div>             <div style = {imgstyle}>                  <img src={this.props.src} width="100%" height="80%" onclick={this.optionalonclick}/>             </div>             <div style = {counterstyle}>                  {this.state.counter}              </div>              </div>     ) } 

});

reactdom.render(<clickableimage src='http://vignette1.wikia.nocookie.net/parody/images/2/27/minions_bob_and_his_teddy_bear_2.jpg/revision/latest?cb=20150507162409' />, document.getelementbyid('app')); 

that's how that:

class clickableimage extends component {     constructor(...args) {         super(...args);          this.state = {             isclickable: false,         };     }      componentdidmount() {         settimeout(() => {             this.setstate({                 ...this.state,                 isclickable: true,             });         }, 1000);     }      handleclick() {         // ...     }      render() {         const optionalonclick = this.state.isclickable ? {             onclick: this.handleclick,         } : {};          return (             <img src={this.props.src} width="100%" height="80%" {...optionalonclick} />         );     } } 

explanation:

1. when component mounted - use settimeout change state isclickable: true
2. in render function check if isclickable set, if - add handler.