Countdown timer in React

by

You have to setState every second with the seconds remaining (every time the interval is called). Here’s an example:

class Example extends React.Component {
  constructor() {
    super();
    this.state = { time: {}, seconds: 5 };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
  }

  secondsToTime(secs){
    let hours = Math.floor(secs / (60 * 60));

    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);

    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;
  }

  componentDidMount() {
    let timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
  }

  startTimer() {
    if (this.timer == 0 && this.state.seconds > 0) {
      this.timer = setInterval(this.countDown, 1000);
    }
  }

  countDown() {
    // Remove one second, set state so a re-render happens.
    let seconds = this.state.seconds - 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds: seconds,
    });
    
    // Check if we're at zero.
    if (seconds == 0) { 
      clearInterval(this.timer);
    }
  }

  render() {
    return(
      <div>
        <button onClick={this.startTimer}>Start</button>
        m: {this.state.time.m} s: {this.state.time.s}
      </div>
    );
  }
}

ReactDOM.render(<Example/>, document.getElementById('View'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

More Related Contents:

  1. The useState set method is not reflecting a change immediately
  2. How to maintain state after a page refresh in React.js?
  3. Simple Component is not rendering: React js
  4. Console.log() after setState() doesn’t return the updated state
  5. Adding new data to firebase users
  6. How to add multiple classes to a ReactJS Component?
  7. React – State not updated
  8. Typescript: React event types
  9. componentDidMount called BEFORE ref callback
  10. React Native: Getting the position of an element
  11. firebase.auth is not a function
  12. Can I update a component’s props in React.js?
  13. ‘Access-Control-Allow-Origin’ issue when API call made from React (Isomorphic app)
  14. Use componentWillMount or componentDidMount lifecycle functions for async request in React
  15. Best way to polyfill ES6 features in React app that uses create-react-app
  16. how to set displayName in a functional component [React]
  17. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  18. Determine which dependency array variable caused useEffect hook to fire
  19. What does “export default” do in JSX?
  20. Axios – DELETE Request With Request Body and Headers?
  21. Updating state to the same state directly in the component body
  22. reactjs and masonry layout – undefined
  23. Jest – SyntaxError: Cannot use import statement outside a module
  24. Scroll into view in react
  25. using css modules how do I define more than one style name
  26. Dynamically Rendering a React component
  27. Could not find “store” in either the context or props of “Connect(App)”
  28. Performance penalty of creating handlers on every render with react-hooks
  29. Function inside functional component in React hooks – Performance
  30. value of using React.forwardRef vs custom ref prop

Leave a Comment