Pomodoro Clock: Reset Button Works, test case still fails?

1

I’m working through the Pomodoro clock, one user story/test case at a time. My Reset button appears to behave correctly, but the Test Case about clicking the reset button still fails like so:

1. When I click the element with the id of "reset", any running timer should be stopped, the value within id="break-length" should return to 5, the value within id="session-length" should return to 25, and the element with id="time-left" should reset to it's default state.
Uncaught TypeError: Cannot read property 'state' of undefined (pen.js:125)
Error: Uncaught TypeError: Cannot read property 'state' of undefined (pen.js:125)
   at a.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:593:1107)"

Help! How/why I could be mistakenly trying to access a property of undefined?

I don’t understand why, because I don’t get the same error in my own console when clicking the reset button manually.

Here is the function that handles clicking the reset button:

reset() {
    console.clear();
    this.setState({
      breakLength: 5,
      sessionLength: 25,
      timeLeft: 25 * 60 * 1000,
      isTimerRunning: false
    });
  }

I am confident that the above is a valid use of the ‘this’ keyword, and of this.setState(), as it correctly sets state if I press the button manually. Additionally, at times I’ve added a “console.log(this)” or “console.log(this.state)” on the preceding line and the console did log what I expected to see.

2

I jumped on the forum to ask the same question. The tests recognize that all id’s are in place but when the timer tests are run, they all fail despite my clock doing exactly what the tests specify. The error I’m seeing is:

Cannot read property 'nodeName' of null
TypeError: Cannot read property 'nodeName' of null
3

I think I solved what was going on with mine!

I tried tweaking bits of my logic around how I was starting and stopping the timer, and at one point, although the test still failed, my browser tab went into an infinite loop of errors. This allowed me check an error in the console and click through to the line it complained about in “pen.js”.

In that file, I saw the line of the error and it was nowhere near my reset function.
I was using setInterval() for my timer countdown, and one of my state properties is timerId. I used this.setState() and was setting timerId to a setInterval() function, which then called setState() to decrement my timeLeft property once a second. I was doing so by passing in ‘this’ as an argument called ‘self’ to the setInterval() function and then calling self.setState(). And it worked in practice but that is the spot at which the error really occurred.

I have since refactored things around and got around to getting the clock to change between Session and Break times. Presently my code is able to call this.setState() to set the timerId to a setInterval() function, AND inside that setInterval() I’m now able to still use this.setState() without having to pass ‘this’ as an arg.

4

nice congrats, Im still working on it on my end. Maybe it has something to do with the interval not clearing or something? I’m toying around with componentWillUnmount().