Convert Unix Timestamp + add 1 hour

Question

I am working on a countdown time for multiple row using map reactjs

I did countdown for 1 hour for multiple rows. it works fine but I have no idea how to do this with real time like using new Date()

I have Unix date, for example 1521827247 how can I convert it and add 1 hour, so I will be able to make countdown

here's my code

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: {},
      seconds: 3600,
      unix: 1521827247
    };
    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 });
    this.startTimer()
  }

  startTimer() {
    if (this.timer == 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>
        car {this.props.data.car} <b>Finish:</b>h: {this.state.time.h}  m: {this.state.time.m} s: {this.state.time.s}
      </div>
        );
  }
}
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [{ "id": 1, "car": 'Audi 2018' }] };
  }

  addCar = () => {
    this.setState(prevState => ({
      data: [...prevState.data, { "id": 2, "car": 'New Car' }]
    }))
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.data.map(row => <MyComponent data={row} key={row.id} />)}
        </ul>
        <button onClick={this.addCar}>Add Car</button>
      </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>

what to do or is there a npm package I can use?

Answer 1

I see you are passing seconds for the countdown, which as of your code is passing 3600 (1 hour in seconds). Adding 3600 to the realtime unix epoch should give you the correct time you desire in seconds, which you can pass on to generate correct hour you want to start the countdown from.

In your code: this.state = { time: {}, seconds: 3600, unix: 1521827247 };

Try: seconds: current_unix_time + 3600

Here's another source: Javascript: how to add n minutes to unix timestamp