Adding milliseconds together to make hours, minutes, seconds and milliseconds

Question

I am trying to add a lapTime to a totalLaptime state using Reactjs.

I have started by putting time in to milliseconds i.e 81300 which equates to 01:21:300 (1 minute 21 seconds 300 milliseconds). I then have a button which onClick adds a new lapTime and then i add lapTime to totalLapTime. Lastly, i then have a function that takes the total milliseconds and converts it to a readable format i.e 01:21:300.

I have my state:

  this.state = {
      lap: 0,
      lapTime: 0,
      totalLapTimes: 0,
      totalLapTimeCalc: ''
    };

My click function to move on to the next lap

handleClick = () => {
    this.setState(({lap, tyres, deg}) => ({
      lap: lap + 1,
      lapTime: this.randomLap(), <-- function makes a random milliseconds 
      totalLapTimes: + this.state.lapTime + this.state.totalLapTimes,
      totalLapTimeCalc: this.lapTimeCalc(this.state.totalLapTimes)
    }));
  };

The function to convert the time from milliseconds to readable format:

lapTimeCalc = (ms) => {
    return new Date(ms).toISOString().slice(11, -1);
};

Expected result should be 01:21:xxx added to totalLapTimeCalc after each click on the lap button.

At the moment, when i click the lap button i have to click it 3 times before the totalLapTime is even converted, and by then the totalLapTimeCalc is incorrect.

[Take a look at this answer](https://stackoverflow.com/questions/29816872/how-can-i-convert-milliseconds-to-hhmmss-format-using-javascript) — Ted, May 14 '19 at 19:50
I think my functions all sort out the times and formats its just they don't seem to add up properly. — devon93, May 14 '19 at 20:11

score 0 · Accepted Answer · answered May 15 '19 at 14:37

You are using state that hasn't been set yet to calculate the state you're setting.

If you change your click handler a little bit, it will work fine:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      lap: 0,
      lapTime: 0,
      totalLapTimes: 0,
      totalLapTimeCalc: ''
    };
  }

  handleClick = () => {

    const { lap, totalLapTimes } = this.state; 
    const lapTime = this.randomLap(); 
    const totalTime = totalLapTimes + lapTime;
    const totalCalc = this.lapTimeCalc(totalTime)

    this.setState({
      lap: lap + 1,
      lapTime,
      totalLapTimes: totalTime,
      totalLapTimeCalc: totalCalc,
    });
  };

  lapTimeCalc = (ms) => {
    return new Date(ms).toISOString().slice(11, -1);
  };

  randomLap = () => Math.floor(Math.random() * 100000) + 80000;


  render() {
    const { lap, lapTime, totalLapTimes, totalLapTimeCalc } = this.state;
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <p>Lap:{lap}</p>
        <p>Lap Time:{lapTime} ({this.lapTimeCalc(lapTime)})</p>
        <p>Total Lap Time:{totalLapTimes}</p>
        <p>Total Lap Time Calc:{totalLapTimeCalc}</p>
      </div>
    );
  }
}



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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Adding milliseconds together to make hours, minutes, seconds and milliseconds

1 Answers1