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 trial

JavaScript Building Applications with React and Redux Getting Started with Redux Redux Initial Setup - index.js

Stopwatch 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.

Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

please 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.

Hi 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
PLUS
Zack Lee
Courses Plus Student 17,662 Points

Looks 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)

impressive! 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.