Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialUnsubscribed User
441 PointsStopwatch on Scoreboard does not work. no time elapses. In the video you test it, and it works just fine.
Just curious as if this is happening to anyone else, the code looks right, but also am newish to React and might be missing a crucial piece of code to run the stopwatch.
Unsubscribed User
441 PointsHi Zack, thanks for commenting back. ill paste the whole component, i havent been able to find any errors but maybe you can spot it!
import React, { Component, PropTypes } from 'react';
export default class Stopwatch extends Component { state = { running: false, previouseTime: 0, elapsedTime: 0, };
componentDidMount() { this.interval = setInterval(this.onTick); }
componentWillUnmount() { clearInterval(this.interval); }
onStart = () => { this.setState({ running: true, previousTime: Date.now(), }); };
onStop = () => { this.setState({ running: false, }); };
onReset = () => { this.setState({ elapsedTime: 0, previousTime: Date.now(), }); };
onTick = () => { if (this.state.running) { var now = Date.now(); this.setState({ elapsedTime: this.state.elapsedTime + (now - this.state.previousTime), previousTime: Date.now(), }); } };
render() { var seconds = Math.floor(this.state.elapsedTime / 100); return ( <div className="stopwatch" > <h2>Stopwatch</h2> <div className="stopwatch-time"> {seconds} </div> { this.state.running ? <button onClick={this.onStop}>Stop</button> : <button onClick={this.onStart}>Start</button> } <button onClick={this.onReset}>Reset</button> </div> ) };
}
1 Answer
Zack Lee
Courses Plus Student 17,662 PointsLooks like you never actually set the interval in the component did mount function. setInterval takes 2 parameters, ( [function to be called] , [frequency of interval in ms]) so your componentDidMount should looks something like this
componentDidMount() {
this.interval = setInterval(this.onTick, 100);
}
let me know if this worked? or if any other issues pop up. also you can format your code in markdown like I did by starting and ending the codeblock with 3 "ticks" (```). you can specify the language after the opening ticks to get different text coloring. ex (```javascript)
Unsubscribed User
441 Pointsimpressive! good catch, i didnt see that. I appreciate the answer, I am currently wrapping up the course, using Redux so nothing is working yet, i will update by the end of the tut to let you know! thanks again.
Zack Lee
Courses Plus Student 17,662 PointsZack Lee
Courses Plus Student 17,662 Pointsplease post your code. I remember doing this course and had trouble at first getting the clock to update. It should work though. If you post your code we can try and troubleshoot.