Function within my Handlecountdown is not working

within the handlecountdown
myCoundown() not working


import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      sessionTime: 25,
      breakTime: 5,
      timer: 25+":00",
      pause: true,
      play: false

    }
        this.handleBinc=this.handleBinc.bind(this)
    this.handleBdec=this.handleBdec.bind(this)
    this.handleSinc=this.handleSinc.bind(this)
    this.handleSdec = this.handleSdec.bind(this)
    this.handleCountDown = this.handleCountDown.bind(this)

  }
  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  }
    componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  }


handleBinc = () => {
 if(this.state.play === true) {
   return;
 }
  this.setState({
    breakTime: this.state.breakTime + 1,
  })
  
}

handleBdec = () => {
 if(this.state.breakTime < 1 || this.state.play === true) {
   return;
 }
  this.setState({
    breakTime: this.state.breakTime - 1,
  })
  
}
  
handleSinc = () => {
 if(this.state.play === true) {
   return;
 }
  this.setState({
    sessionTime: this.state.sessionTime + 1,
    timer: this.state.timer + 1,
  })
  
  
}
  
handleSdec = () => {
 if(this.state.sessionTime < 1 || this.state.play === true) {
   return;
 }
  this.setState({
    sessionTime: this.state.sessionTime - 1,
    timer: this.state.timer - 1,
  })
  
}
  
handleBreakTime = () => {
  var myDate = new Date();
  var timing = this.state.breakTime * 60000;
  
}
  
handleCountDown = () => {
  if (this.state.play === false){
    this.setState({
      play: true
    })
  } else {
    this.setState({
      play: false
    })
    return
  }; 
  console.log(this.state.sessionTime)
  var myDate = new Date();
//    console.log(myDate)
  var timing = this.state.sessionTime * 60000;
//    console.log(timing)
  myCountDown(function(){
    console.log('got into the function')
    timing = timing - 1000;
    var minutes = Math.floor((timing % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor ((timing % (1000 * 60)) / 1000);
    HTML.getElementsByID('time-left').innerHTML = minutes + ":" + seconds
    
    this.setState ({
      timer:  minutes + ":" + seconds
    })
    
    if (timing < 0 ) {
      handleBreakTime();
    }
  }, 1000)
}
  render() {
   
    return (
      <body>
        <div id='timer'>
          <div id='length-label'>
            <div id='left-container'>
            <p>Break Length</p>
              <div id='left-buttons'>
              <div type='button' id='break-increment' onClick={() => this.handleBinc()}></div>
                <div id='break-time'>{this.state.breakTime}</div>
              <div type='button' id='break-decrement' onClick={() => this.handleBdec()}></div>
            </div>
              </div>
          <div id='session-label'>
            <div id='right-container'>
            <p>Session Length</p>
              <div id='right-buttons'>
              <div type='button'  id='session-increment' onClick={() => this.handleSinc()}></div>
                <div id='session-time'>{this.state.sessionTime}</div>
              <div type='button' id='session-decrement' onClick={() => this.handleSdec()}>
              </div> 
            </div>
              </div>
          </div>
        </div>
        <div id='timer-label'>
          <p>Session</p>
            <div id='time-left' >{this.state.timer}</div>
        <button class='controls' id='start' label="start" onClick={() => this.handleCountDown()}>start/stop</button>
        <button class='controls' id='reset' label="start" onClick={() => this.handleCountDown()}>reset</button>
            </div>
        </div>
      </body>
      
    );
  }
};


ReactDOM.render(<App />, document.getElementById("root"))


Please link to a live version of your project instead.


I don’t see a definition for the myCountDown function anywhere.

What is HTML? I don’t see you getting a reference to this element anywhere. Also, using innerHTML is not how you are supposed to update the DOM in React. You create and update the state, any update gets reflected in the DOM by the state reference.

here is my code

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