Well, first of all, you have used “class” instead of “className” in your JSX. That won’t work.
I also see that you are manipulating the DOM with things like:
document.getElementById('time-left').innerHTML=strnewtimeleft;
document.getElementById('timer-label').innerHTML=this.state.timerlabelstring
You should never, never, never manipulate the DOM directly when using React. That defeats the purpose of using React and prevents it from knowing what is happening with the DOM. I don’t that that is what is causing your problem, but I also wouldn’t want to dig too deeply until you get that straightened up.
What I think is causing the problem is revealed by the test message:
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).
time-left is not formatted correctly: expected ‘25’ to equal ‘60’ AssertionError: time-left is not formatted correctly: expected ‘25’ to equal ‘60’
So, it is expecting the “time-left” to be 60, but it’s 25. So, is pressing that button to get to 60.
In the test is the code:
// Set session length to 60
clickButtonsById(Array(35).fill(seshPlus));
Yes, you can’t see that in your app, but that is on the FCC repo. It may look strange, but it is clicking your session increment 35 times (starting at 25, that should give you 60).
When I go to your app, pressing the session increment button has no effect on the time-left - neither at that moment nor when I start the session. I could not get the session to be anything other than 25 minutes.