25 + 5 Clock Challenge - Can't Update React State

JavaScript
1

Hi Everyone,

I’m doing the 25 + 5 Clock challenge now and am stuck on something that should be very simple. I’m trying to update this.state.breakLength when the break decrement button is clicked. However, nothing seems to be happening when the button is clicked, and the break length on the display is not getting updated.

What am I missing? See code below and thanks in advance for any help.

import React, { useState } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import useStateInCustomProperties from "https://cdn.skypack.dev/use-state-in-custom-properties";


class Clock extends React.Component {
  
  constructor(props) {
    
    super(props);
    
    this.state = {
      breakLength: 5,
      sessionLength: 25
    }
    
    this.breakDecrement = this.breakDecrement.bind(this);
    
  }
  
  breakDecrement() {
      
    this.setState({
      breakLength: this.breakLength--
    })
    
  }

render() 
  
  {
    
  return (
    
  <div>
      <div id="start_stop" class="bigbutton">|<br/>O</div>
      <div id="reset" class="bigbutton"><p id="reset-text">Reset</p></div>
      <div id="break-decrement" class="button" onClick={this.breakDecrement}>▼</div>
      <div id="break-increment" class="button">▲</div>
      <div id="session-decrement" class="button">▼</div>
      <div id="session-increment" class="button">▲</div>
    <div id="clock">
      <div id="break-label">Break Length
        <div id="break-length">{this.state.breakLength}</div> 
      </div>
      
      <div id="session-label">Session Length
        <div id="session-length">{this.state.sessionLength}</div>
      </div>
      <div id="timer-label">Session</div>
      <div id="session-container">
        <div id="time-left">25</div>
      </div>
    </div>
   
  </div>
  
  );

  }

};

ReactDOM.render(<Clock/>, document.getElementById('root'))
3

Wow I had no idea changing the z-index could have that effect. I removed that from the CSS and it is working now, thank you!

I’ve been trying to play around with the position of the buttons, changing them from absolute to relative, and using margin-left instead of left to reposition them. Whatever I do, they seem to move around though when the screen is resized. I’ll need to keep working on them to make it so that they don’t move. Perhaps the location of the button divs in the React code is what’s causing the trouble?

4

You can use absolute position for the buttons but you should use the offsets left/right/top/bottom and not margin for the positioning.

You need to make the container position: relative and make sure it has a fixed width (width: fit-content would work). Then use position: absolute for the buttons (not relative). Seeing as this is unlikely to be responsive giving the clock-container a fixed width is fine (although it is usually to be avoided otherwise).

If you do it correctly the buttons should stay where they are even if the screen size is changed.

Example (try it yourself first) 
body {
  text-align: center;
  margin: auto;
}

#clock {
  width: 600px;
  height: 200px;
  background-color: black;
  border: 7px solid gray;
  border-radius: 20%;
  margin: auto;
  margin-top: -4px;
}
#break-label {
  color: red;
  font-weight: bold;
  display: inline-block;
  margin-top: 2%;
  margin-left: 10%;
  float: left;
}
#session-label {
  color: red;
  font-weight: bold;
  display: inline-block;
  margin-top: 2%;
  float: right;
  margin-right: 10%;
}
.button {
  width: 20px;
  height: 15px;
  background-color: gray;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: inline-block;
  color: white;
  cursor: pointer;
  font-size: 12px;
}
.button:hover {
  color: gray;
}
.button:active {
  top: 45px;
}

#session-container {
  width: 280px;
  height: 100px;
  background-color: black;
  border: 7px solid #0b00e0;
  border-radius: 5%;
  margin: auto;
  margin-top: 10px;
}
#timer-label {
  color: white;
  margin: auto;
  margin-bottom: 0px;
  margin-top: 20px;
  font-weight: bold;
  font-size: 30px;
}
#time-left {
  color: red;
  font-weight: bold;
  font-size: 70px;
  font-family: Orbitron, sans-serif;
  margin: auto;
  margin-top: 5px;
}

#start_stop:active {
  background-color: orange;
}

#reset-text {
  position: relative;
  top: -7px;
}

#clock-container {
  margin: auto;
  margin-top: 40px;
  position: relative;
  width: fit-content;
}

.bigbutton {
  background-color: black;
  width: 45px;
  height: 30px;
  display: inline-block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#reset {
  position: absolute;
  top: -14%;
  background-color: red;
  color: white;
}

#start_stop {
  position: absolute;
  top: -14%;
  left: 40%;
  background-color: green;
  color: white;
  font-size: 14px;
}

#break-decrement {
  position: absolute;
  left: 20%;
  top: -7%;
}

#break-increment {
  position: absolute;
  left: 26%;
  top: -7%;
}

#session-decrement {
  position: absolute;
  right: 26%;
  top: -7%;
}

#session-increment {
  position: absolute;
  right: 20%;
  top: -7%;
}
1 Like
5

Thank you @lasjorg . I’ve fixed it now so everything stays where it’s supposed to be when it’s resized…I’ve also added…a little FLARE to it :smile: . I think all the tests should pass now except for a few at the end. I still need to add audio. However, the tests are getting hung up and stuck on test 11 and not moving to the other tests. Any idea what might be causing the tests to hang there?

6

It looks like the reset is causing the issue. I didn’t look much at it but you are doing plain DOM manipulation which you should never do in React.

document.getElementById(
  "time-left"
).innerHTML = `${globalSessionMinutes}:${globalSeconds}`;

//Update the time-left element with value of globalSessionMinutes and globalSeconds.

document.getElementById("timer-label").innerHTML = "Session";
document.getElementById(
  "time-left"
).innerHTML = `${globalSessionMinutes}:${globalSeconds}`;

The elements should be referring to reactive state. You change the state and the DOM is updated with the changes. You do not manually change the DOM content.

7

@lasjorg Thanks for your feedback. I didn’t realize direct DOM manipulation within React was a no-no. The reason I did that, was because the setState({}) method does not seem to work within an interval. I’ve read there are ways around that, but they seemed somewhat complicated. I’ll have to read up on it more though, and figure out how to change the state from within an interval I guess, and then redo certain parts of the code.

8

Updated: I’ve tried commenting out all of the direct DOM manipulation and running the tests, but it still gets stuck on test 11. So I’m thinking it must be something else. Any other ideas? I’m lost.

9

I would expect to see no calls to innerHTML anywhere in the code.

If I set both timers to 1 min and let it run down when it switches to the break timer I see a negative value -1:59 in the timer.

10

I fixed that just now. I needed to update the code so that when the minutes got below 10, it added a “0” before the minute so it would be in the format mm:ss for minutes below 10. This threw off the IF statement that made it switch from session minutes to break minutes when 00:00 is shown on the timer.

11

Updated:

I’ve managed to get 26 of 29 tests to pass. I can’t figure out why the last three aren’t passing though as the clock seems to be functioning as intended. Below are two of the errors I’m getting.

The only thing I can think of, is that instead of changing the value of sessionMinutes within the interval to the value of the globalBreakMinutesVariable when 00:00 time is reached, it wants me to call a new interval and clear the current interval. Could this be why the last three tests are failing?

TIA for any help.

1
11205×419 96.7 KB

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.