CODEWITHSUNDEEP
javascriptreactjs
Jake
Jake

Reputation: 422

React onClick not working to start a timer

I know there have been a few of these questions posted but I haven't been able to find an answer to work. My code is below. Everything links, and I was able to get a more simple timer working that just starts timing when the component mounts, but now I want to make it more interactive. however, when I click the button nothing happens. What I am trying to do is have a component that is a button, when clicked it becomes a timer and displays the amount of time passed since clicked. But clicking the button doesn't do any thing.

thanks for the help!

var StartButton = React.createClass({
  getInitialState:function(){
    return { elapsed: 0, go: false };
  },
  getDefaultProps: function() {
    return {
      interval: 1000
    };
  },
  componentDidMount: function(){
    console.log('mounted');
  },
  tick: function(){
    console.log('tick')
    this.setState({elapsed: new Date() - this.state.start});
  },
  startCount: function(e){
    console.log(e);
    console.log('GO!!!')  
    this.state.props = Date.now;
    this.state.go = true;  
    this.timer = setInterval(this.tick, this.props.interval);
  },
  render: function(){
    var self = this;
    var elapsed = Math.round(this.state.elapsed / 100);
    var seconds = (elapsed / 10).toFixed(3); 
    var clickMe = <button onCLick={self.startCount} >GO</button>;
    var display = <div>time elapsed {this.state.elapsed}</div>
    return (
        <div>
          {this.state.go ? display : clickMe}
        </div>
      )    
  }
})

var AppContainer = React.createClass({
  render: function(){
    return (<div><StartButton interval={1000} /></div>);
  }
})

$(document).ready(function () {
  console.log('in ready');
  ReactDOM.render(<AppContainer></AppContainer>, document.getElementById('jake'));
});

Upvotes: 0

Views: 743

Answers (2)

user5738822
user5738822

Reputation:

I think you problem is here with onClick: 

var clickMe = <button onClick={self.startCount} >GO</button>;

Upvotes: 1

Jake Haller-Roby
Jake Haller-Roby

Reputation: 6427

Not sure if you found all the small errors by now, but in case you haven't, here's a working copy of your component;

var StartButton = React.createClass({
    getInitialState:function(){
        return { elapsed: 0, go: false };
    },
    getDefaultProps: function() {
        return {
            interval: 1000
        };
    },
    componentDidMount: function(){
        console.log('mounted');
    },
    tick: function(){
        console.log('tick')
        this.setState({elapsed: Date.now() - this.state.start});
    },
    startCount: function(e){
        console.log(e);
        console.log('GO!!!')
        this.setState({start: Date.now(), go: true})
        setInterval(this.tick, this.props.interval);
    },
    render: function(){
        var clickMe = <button onClick={this.startCount} >GO</button>;
        var display = <div>time elapsed {Math.round(this.state.elapsed / 1000)} seconds</div>
        return (
            <div>
                {this.state.go ? display : clickMe}
            </div>
        )
    }
})

Upvotes: 1

Related Questions