[25+5 Clock] Need Guidance - Test fail at #Timer 14 and 15

[koizumi.t.ryushi]

Hi everyone !
I recently decided to finally finish the course of front end library.

On the Pomodoro clock, I just cannot pass the test 14 and 15 and have now been spending couple of days on it.

Please find the link below:
https://codepen.io/q-nanogram/pen/BapXzqV

The audio does not play when the break timer ends it seems.
When using React.useState(new Audio(…)) the audio plays back to back, but using the html audio tag doesn’t seems to work.

I would be very grateful for any insight !
Thank you in advance !!

[koizumi.t.ryushi]

Hello everyone!!
The problem is solved !

I hope you are gucci.
For anyone who might be interest in the future, the synthax was using the access the audio ref was not correct.

For whatever reason when defining the ref as :

• const [audioBeep, setAudioBeep] = React.useState(null)
• < audio … ref={ (audio) => setAudioBeep(audio) }>

Then playing the audio by calling audioBeep.play(), breaks something in the timing of the interval thus not transitioning into break properly or session properly unless Start / Pause button was not pushed at least once during the count down.

The proper way was to use:

• const audioBeep = React.useRef(null);
• ref = {audioBeep}

Then when referring to the audio, use audioBeep.current.play() etc…

I first resorted to the first version as I was told that refs do not work in function as functions do not have instance.

Here is what I believe and might want confirmation:

In this case, since we are setting an interval, the DOM is re-rendered thus creating instances making the ref work.

Good lucks people !