React 25+5 clock, error "cannot read properties of null"

[MoxElliot]

Hello all,

I’ve gotten stuck on the Front-end library project 25+5 clock. I’m building it in React with Sass styling. I wanted to build it with functional components & hooks to get practice.

I haven’t gotten all the features needed in yet but want to clear two errors first.

First, the timer is throwing an error at multiple tests (reading ‘1’ or ‘2’)

Cannot read properties of null (reading '1')
TypeError: Cannot read properties of null (reading '1')
    at u (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:149729)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:153167
    at l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79440)
    at Generator._invoke (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79193)
    at Generator.next (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:584:79799)
    at r (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1054)
    at s (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1265)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1324
    at new Promise (<anonymous>)
    at n.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:1:1205

For the first error, I haven’t figured out a way to test where the null value is coming from . I’ve read the issue may running the render before the DOM is initialized (probably on the

element where the timer is). I haven’t been able to find a solution that works.

The second error is

Script error. (:0)
Error: Script error. (:0)
    at r.onerror (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:14032)

For the second error, honestly, I have no clue where to start.

25 + 5 Clock

I’m trying to learn my way through as much as possible, so any suggestions about what to research, where to look, or how to test the errors are greatly appreciated!

Thank you!

[kevinSmith]

@MoxElliot

For the first error, I haven’t figured out a way to test where the null value is coming from .

Judging by the trace, it looks like it is in the test code. Since that code is used a lot, I would guess it was either a glitch or a fault in your code that the test wasn’t designed to handle. It seems like it was trying to index an array but that array was null. I’m guessing it was trying to read some elements from the DOM but it couldn’t find them.

I can see an element with corresponding id=“time-left”. NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

Cannot read properties of null (reading ‘1’) TypeError: Cannot read properties of null (reading ‘1’)

Looking at that code:

<p id="time-left" onChange={setTimeLeft}>{timeLeft > 0 ? Math.floor(timeLeft / 60) + ":" +  Math.floor(timeLeft % 60): "Timer Done"}</p>

Are you supposed to display “Timer Done” there? The test says, “NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).” That is taken from the user story:

User Story #8: I can see an element with corresponding id="time-left" . NOTE: Paused or running, the value in this field should always be displayed in mm:ss format (i.e. 25:00).

A string is not in mm:ss format.

For reference, this is the test code from the repo.

      it(`I can see an element with corresponding id="time-left".
      NOTE: Paused or running, the value in this field should always be
      displayed in mm:ss format (i.e. 25:00).`, async function () {
        const target = document.getElementById('time-left');
        assert.isNotNull(target);
        assert.strictEqual(
          getMinutes(target.innerText),
          '25',
          'time-left is not formatted correctly'
        );
        // Set session length to 60
        clickButtonsById(Array(35).fill(seshPlus));
        // wait for 1.5 seconds to allow any re-renders to catch up
        await timeout(1500);
        assert.strictEqual(
          getMinutes(target.innerText),
          '60',
          'time-left is not formatted correctly'
        );
      });

It is grabbing that and pumping it through the getMinutes function. This is that:

  const timerRe = new RegExp(/^(\d{2,4})[\.:,\/](\d{2})$/);

  function getMinutes(str) {
    return timerRe.exec(str)[1];
  }

What happens when I send that a string? When I run this code:

console.log(timerRe.exec('Timer Done'))
// null

So, that is where the error is happening. And it is happening because it is encountering a string of text when it was expecting a string representing time. Now, the test could have been written a little better to fail more elegantly here, but hindsight is 20/20.

I’m not sure about the other error, it is taking forever and I don’t have time to wait. It may be that it is caused by the same thing, or something similar.

Reread the instructions. Read them closely. Reread them again. When I am working on a task at work, I read the specs 3 times. Then (if it is a multi-day task) I reread them each morning. When I think I am done, I read them again. Then I read them again right before I submit. In dev work, little tiny details are extremely important.