My timer works for the most part. It counts down from where I ask it to countdown from, but it doesn’t pass tests 8 ( When I first click the element with id=“start_stop”, the timer should begin running from the value currently displayed in id=“session-length”, even if the value has been incremented or decremented from the original value of 25.), 9( If the timer is running, the element with the id of “time-left” should display the remaining time in mm:ss format (decrementing by a value of 1 and updating the display every 1000ms).), 10( If the timer is running and I click the element with id=“start_stop”, the countdown should pause.), or 11( If the timer is paused and I click the element with id=“start_stop”, the countdown should resume running from the point at which it was paused.).
Now, my timer actually does fulfill all these requirements, but it keeps failing these tests. The error message reads “Cannot read property ‘2’ of null” and I am so confused.
Following is my JS:
class App extends React.Component
{
constructor(props)
{
super(props);
this.state = {
running: false,
sessionlength: 25,
breaklength: 5,
time_left: (25 * 60)
}
this.aa;
this.reset = this.reset.bind(this);
this.startstop = this.startstop.bind(this);
this.setInterval= this.setInterval.bind(this);
this.stoptimerithink = this.stoptimerithink.bind(this);
this.breakincrementfunc = this.breakincrementfunc.bind(this);
this.breakdecrementfunc = this.breakdecrementfunc.bind(this);
this.sessionincrementfunc = this.sessionincrementfunc.bind(this);
this.sessiondecrementfunc = this.sessiondecrementfunc.bind(this);
}
breakincrementfunc()
{
if(this.state.breaklength < 60)
{
var newbreaklength = this.state.breaklength + 1;
this.setState({
breaklength: newbreaklength
});
}
}
breakdecrementfunc()
{
if(this.state.breaklength > 1)
{
var newbreaklength = this.state.breaklength - 1;
this.setState({
breaklength: newbreaklength
});
}
}
sessionincrementfunc()
{
if(this.state.sessionlength < 60)
{
var newsessionlength = this.state.sessionlength + 1;
this.setState({
sessionlength: newsessionlength
});
}
}
sessiondecrementfunc()
{
if(this.state.sessionlength > 1)
{
var newsessionlength = this.state.sessionlength - 1;
this.setState({
sessionlength: newsessionlength
});
}
}
reset()
{
if(this.state.running == true)
{
this.stoptimerithink();
}
this.setState({
running: false,
sessionlength: 25,
breaklength: 5,
time_left: (25 * 60)
});
}
startstop()
{
if(this.state.running == false)
{
this.setState({
running: true
});
this.setInterval();
}
else
{
this.setState({
running: false
});
this.stoptimerithink();
}
}
setInterval()
{
var self = this;
this.aa = setInterval(function()
{
console.log(this);
var ihatemylife = self.state.time_left - 1;
self.setState({
time_left: ihatemylife
});
},1000);
}
stoptimerithink()
{
clearInterval(this.aa);
}
render()
{
console.log(this.state.running);
var timeleft = (this.state.time_left);
return(
<div>
<h1>hey man</h1>
<BreakComponent running={this.state.running} breaklength={this.state.breaklength} breakincrementfunc={this.breakincrementfunc} breakdecrementfunc={this.breakdecrementfunc} />
<SessionComponent running={this.state.running} sessionlength={this.state.sessionlength} sessionincrementfunc={this.sessionincrementfunc} sessiondecrementfunc={this.sessiondecrementfunc} />
<Timer time_left={timeleft} />
<button id="start_stop" onClick={this.startstop}>Start/Stop</button>
<button id="reset" onClick={this.reset}>Reset</button>
</div>
);
}
};
class BreakComponent extends React.Component
{
constructor(props)
{
super(props);
this.state = {
breaklength: this.props.breaklength
};
}
componentWillReceiveProps(nextProps)
{
this.setState(
{
breaklength: nextProps.breaklength
});
}
render()
{
//console.log(this.props);
return(
<div>
<h1 id="break-label">Break Length</h1>
<p id="break-increment" onClick={this.props.breakincrementfunc}>break-increment</p>
<p id="break-decrement" onClick={this.props.breakdecrementfunc}>break-decrement</p>
<h3 id="break-length">{this.state.breaklength}</h3>
</div>
);
}
}
class SessionComponent extends React.Component
{
constructor(props)
{
super(props);
this.state = {
sessionlength: this.props.sessionlength
};
}
componentWillReceiveProps(nextProps)
{
this.setState(
{
sessionlength: nextProps.sessionlength
});
}
render()
{
return(
<div>
<h1 id="session-label">Session Length</h1>
<p id="session-increment" onClick={this.props.sessionincrementfunc}>session-increment</p>
<p id="session-decrement" onClick={this.props.sessiondecrementfunc}>session-decrement</p>
<h3 id="session-length">{this.state.sessionlength}</h3>
</div>
);
}
}
class Timer extends React.Component
{
constructor(props)
{
super(props);
}
render()
{
var time_left_minutes = Math.floor(this.props.time_left/60);
var time_left_seconds = Math.floor(((this.props.time_left/60) - time_left_minutes) * 60);
return(
<div>
<h2 id="timer-label">Session</h2>
<h1 id="time-left">{time_left_minutes}:{time_left_seconds}</h1>
</div>
);
}
}
React.render(<App />, document.getElementById("app"));
As I mentioned, I keep getting an error saying that my timer is being logged as a number? I have thrown in some console logs, and it is true, every time i press the start/stop button, I do keep getting an number starting at 0 and going up by 1 every time the timer is supposed to start, but the timer also runs fine, so Im just confused as to (1)why I’m getting an error if it’s working out fine? and (2) what am I doing wrong that I’m even getting a number to begin with?
(Please excuse the mess of code, it has been a very frustrating project so far)