25 + 5 Timer Not passing tests even though it works?

Ive been trying for ages to complete this but it just isnt working. People on stack-overflow keep closing my posts for help and it generally just won’t let me finish it even though the code is 100% functional in my eyes. Please help me figure out why the tests arent passing.

Link to my code: https://codepen.io/brad2007/pen/abEeyNx

You are mutating state instead of using setState. I would start by fixing that.

I will get back to you when I fix that. Thanks!

I’ve done that now but it still isnt passing some of the tests. I fixed what had broken because of it but now im stuck again.

You are still mutating the state in multiple places. At no point should you do this.state.someProp = 'some new value'

So for example, none of this this.state.sessionLength += 1; or this this.state.timeRemaining--;.

Search for this.state and correct all your state mutations to use setState instead.

When I do that the tests start to work a bit more as intended.

I’ve completely ran through and made sure there is none left but now the increment and decrement buttons are late to update the time…

I would suggest you check the state before trying to change the break/session length in the state. So basically the same code as in updateBrkAndSesh should be wrapping setState calls instead.

That was fun… somehow we can now set your times to -1 which made the tests run forever as the clock decrements.

When I was using React I found that state updates aren’t immediate, meaning if I did something like this, it would use the old value in the code instead of new values:

this.setstate({myvar: false})
if (this.state.myvar == true) { console.log("failure") }

OUTPUT: failure

The if line would run before the state updated… I read that its because the state can’t be changed until a new render is complete which is kicked off by changing the state, but it doesn’t stop and wait for that. A way around that is to do your logic, then when finished perform a state update… or pull the old values of the states into a local variable to use in your future logic:


myNewStateValue = false
if (myNewStateValue== true) { console.log("failure") }
this.setstate({myvar: myNewStateValue})

The way to handle it depends on what your code is attempting to do. Also, I see you are using state values to update your state values. If you remember right from the lessons you should do that with a callback function, not directly.

this.setstate( state => ({example = state.example + " updated example"}))

FROM YOUR CODE:
this.setState({ breakLength: this.state.breakLength - 1 });

Although unless you are making a lot of changes at the same time, or multiple users are involved, it may not cause an issue with a smaller app like this, but probably should get into the habit. Hope this all makes sense.