Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,650 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,650 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.