CODEWITHSUNDEEP
javascriptreactjs
Dominique Higgins
Dominique Higgins

Reputation: 49

Getting NaN instead of numbers on my countdown clock?

I'm creating a countdown clock that counts down the days, hours, minutes, and seconds until the date provided. I have the countdown working but only if I manually enter a date in my getTimeNow() function. When I give the function an argument of "deadline" and then use that argument in the "time" variable, it comes back as NaN. I know I'm missing something but I can't figure out what.

I've tried reformatting the function to acquire the correct date format but then I can't update the original date through the input field.

Note: The app isn't completed yet, I still have some refactoring to do but it should still work correctly at this point.

Clock.jsx


import React, { Component } from 'react';
import './Countdown.css';

class Clock extends Component {
  constructor(props) {
    super(props);

    this.state = {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    }
  }

  componentWillMount() {
    this.getTimeNow(this.props.deadline);
  }

  componentDidMount() {
    setInterval(() => this.getTimeNow(this.props.deadline), 1000);
  }

  getTimeNow(deadline) {
    const time = Date.parse(deadline) - new Date();
    const seconds = Math.floor((time/1000)%60);
    const minutes = Math.floor((time/1000/60)%60);
    const hours = Math.floor(time/(1000 * 60 * 60) % 24);
    const days = Math.floor(time/(1000 * 60 * 60 * 24));

    this.setState({days,hours, minutes, seconds});
  }

  render() {

    return (
      <div>
        <div className="days">{this.state.days}: days</div>
        <div className="hours">{this.state.hours}: hours</div>
        <div className="minutes">{this.state.minutes}: minutes</div>
        <div className="seconds">{this.state.seconds}: seconds</div>
      </div>
    )
  }
}

export default Clock;

Countdown.jsx

import React, { Component } from 'react';
import Clock from './Clock';
import './Countdown.css';

class Countdown extends Component {
  constructor(props) {
    super(props);

    this.state = {
      deadline: 'November 16, 2020',
      newDeadline: ''
    }
  }

  changeDeadline() {
    this.setState({deadline: this.state.newDeadline});
  }

  render() {
    return (

    <div className="Countdown">
        <div className="title">
            Countdown to {this.state.deadline}
      </div>

      <Clock />

      <div className="input">
      <input
        placeholder='new date'
            onChange={event => this.setState({newDeadline: event.target.value})}
        />
        <button onClick={() => this.changeDeadline()}>Submit</button>
      </div>
    </div>

    )
  }
}

export default Countdown;

I expect the output to be a countdown from days to seconds but I get NaN by each. I also expect the countdown to change appropriately when the user inputs a new date.

Upvotes: 4

Views: 809

Answers (1)

magneticz
magneticz

Reputation: 2440

Because you didn't provide whole code sample, how you are using your component Clock component, answering might be tricky. But most probably, you are passing in wrong thing as a deadline. If you look at MDN, Date.parse() takes in string representation of the date and returns number in milliseconds. It will however return NaN, if string is not recognized.

Try to pass something like "March 21, 2020" to deadline prop, and it should work.

Upvotes: 1

Related Questions