CODEWITHSUNDEEP
reactjstimer
pythonlearner
pythonlearner

Reputation: 57

Reactjs: getCurrentTime and display/NaN minutes

Hey I have written a website on which I want to display the currentTime+36 minutes as well as showing a timer until then.

My code does not compile because of following error after newDate at the place of either the "$" or "+":

Parsing error: Unexpected token, expected "{"

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
  whiteFont: {
    color: 'white',
    textAlign: 'center'
  }
});

class TimeCount extends Component {
  constructor(props) {
    super(props);
    this.state = {
      timerOn: false
    };
    this.timerStart = this.timerStart.bind(this);
    this.timerStop = this.timerStop.bind(this);
    this.tick = this.tick.bind(this);
    this.currentTime = this.currentTime.bind(this);
    this.minutesPlus36 = this.minutesPlus36.bind(this);
    this.hoursPlus36 = this.hoursPlus36.bind(this);
    this.counterMinutes = 36;
    // this.currentTime = 45;
    this.counterSeconds = 0;
    this.counterStep = 1;
    this.classes = props.classes;
  }

  timerStart() {
    this.timerID = setInterval(() => this.tick(), 1000);
    this.setState({ timerOn: true });
  }

  currentTime() {
    var today = new Date();
    var date;

    var hours = today.getHours();
    var minutes = today.getMinutes();

    var text= ":"
    var newDate={hoursPlus36(hours, minutes) ${text} + minutesPlus36(minutes)};
// var newDate={hoursPlus36(hours, minutes) + ":"+ minutesPlus36(minutes)};

    this.setState({currentTime: newDate});
  }
  minutesPlus36(minutes) {
    return (minutes + 36) % 60;
  }
  hoursPlus36(hours, minutes) {
    if (minutes + 36 > 59) return hours + 1;
    else return hours;
  }

  timerStop() {
    clearInterval(this.timerID);
    this.setState({ timerOn: false });
  }

  tick() {
    if (this.counterSeconds == 0) {
      this.counterMinutes = this.counterMinutes - this.counterStep;
      this.counterSeconds = 59;
      this.setState({
        counterMinutes: this.counterMinutes,
        counterSeconds: this.counterSeconds
      });
    } else {
      this.counterSeconds = this.counterSeconds - this.counterStep;
      this.setState({
        counterSeconds: this.counterSeconds
      });
    }

    if (this.counterMinutes <= 0 && this.counterSeconds <= 0) {
      this.setState({ timerOn: false });
      this.timerStop();
    } else {
      this.setState({ timerOn: true });
    }
    console.log('counterMinutes: ' + this.counterMinutes);
  }

  componentDidMount() {
    let timerOn = this.state.timerOn;
    this.timerStart();
    this.currentTime();
    //this.setState({currentTime: {currentTime()}});
  }

  render() {
    return (
      <React.Fragment>
        <span>
          <span className={this.classes.whiteFont}>
            The emergency team arrives at {this.state.arrivalTime} pm.
          </span>
          <br />
          Time until rescue team arrival: {this.state.counterMinutes} minutes
        </span>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(TimeCount);

I would really appreciate your help. Thank you!

EDIT: I changed the code according to the suggestions and edited the new error

Upvotes: 0

Views: 271

Answers (1)

ravibagul91
ravibagul91

Reputation: 20765

You are writing this.currentTime=45 in constructor and it is never used.

Also you are trying to call this.currentTime() in componentDidMount() which is not a function as you assign a value to this.currentTime in constructor.

To make it work,

Remove this.currentTime=45 from contructor as they are of no use.

You also missed to bind this to currentTime function, add this into your constructor,

this.currentTime = this.currentTime.bind(this);

Update

Check this if it works,

var text = ':';
var hoursPlus = this.hoursPlus36(hours, minutes);
var minutesPlus = this.minutesPlus36(minutes);
var newDate = hoursPlus + text + minutesPlus;
this.setState({currentTime: newDate});

Demo

Upvotes: 1

Related Questions