Good evening. For some reason, I can not parse time - returns NaN, I do not understand what the error is:

Reducers:

case START_TIMER: { const todo = { ...state.todos.find(item => item.id === action.id) }; todo.startTime = new Date(); const todos = [...state.todos].map(item => item.id === action.id ? todo : item); return { ...state, timerActive: true, timerTodo: action.id, todos }; } case STOP_TIMER: { return { ...state, timerActive: false, timerTodo: null } } case UPDATE_TODO_TOTAL: { const todo = { ...state.todos.find(item => item.id === action.id) }; todo.total += 1; const todos = [...state.todos].map(item => item.id === action.id ? todo : item); const total = state.total || 0; return { ...state, todos, total: total + 1 }; }

Component:

 import React, { Component, PropTypes } from 'react' import classnames from 'classnames' import moment from 'react-moment' let interval; export default class TodoItem extends Component { static propTypes = { todo: PropTypes.object.isRequired, deleteTodo: PropTypes.func.isRequired, completeTodo: PropTypes.func.isRequired } componentWillUnmount() { clearInterval(interval); } handleDeleteClick = () => { this.props.deleteTodo(this.props.todo.id); } handleCompleteClick = () => { this.props.completeTodo(this.props.todo.id); } handleStartClick = () => { this.props.startTimer(this.props.todo.id); interval = setInterval(() => { this.props.updateTimer(this.props.todo.id); }, 1000); } handleStopClick = () => { this.props.stopTimer(this.props.todo.id); clearInterval(interval); } render() { const { todo, timerActive, timerTodo } = this.props const {total} = todo.total; const timerDisplay = ('0' + ((total/3600)|0)%60) + ':' + ('0'+ ((total/60)|0)%60).substr(-2) + ':'+('0' + total%60).substr(-2); return ( <li className={classnames({ completed: todo.completed })}> <div className="view" style={{ display: 'flex', alignItems: 'center' }} onClick={this.handleSelectToDo}> <input className="toggle" type="checkbox" checked={todo.completed} onChange={this.handleCompleteClick} /> <label style={{ width: '50%' }}> {todo.text} </label> <span style={{ display: 'block', fontSize: 20 }}>{timerDisplay}</span> {(!timerActive || timerTodo === todo.id) && ( <button style={{ background: 'transparent', border: 0, outline: 0, fontSize: 12, cursor: 'pointer', marginLeft: 30 }} disabled={timerActive && timerTodo !== todo.id} onClick={timerActive ? this.handleStopClick : this.handleStartClick} >{timerActive ? 'Stop' : 'Start'}</button> )} <button className="destroy" onClick={this.handleDeleteClick} /> </div> </li> ) } }

I would be grateful for any advice!

    1 answer 1

    This issue was resolved by adding the code:

     formatSeconds = (seconds) => { let hours = Math.floor(seconds / 3600); seconds = seconds % 3600; let minutes = Math.floor(seconds / 60); seconds = seconds % 60; return (hours < 10 ? '0' : '') + hours + ':' + (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds; }

    as well as making changes to this line:

     <span style={{ display: 'block', fontSize: 16 }}>Total time is {this.formatSeconds(todo.total)}</span>