Rerender moment.fromNow() in React

Question

How properly refresh moment.from(). I tried set setInterval(this.renderReminders(), 1000) in componentDidMount, but doesn't work, popup error. How solve this issue?

class App extends Component {

renderReminders() {
    const { reminders } = this.props;
    return (
      <ListGroup>
        {
          reminders.map(reminder => {
            return (
              <ListGroupItem key={reminder.id}>              
                <div>{moment(reminder.dueDate, 'DD-MM-YYYY HH:mm').fromNow()}</div>             
              </ListGroupItem>
            ) // return
          }) // reminders.map
        }
      </ListGroup>
    ) // return
  } // renderReminders()
  
  render() {
    return (
      <div className="container">      
        { this.renderReminders() }
      </div>
    ) // return
  } // render
  
 } // App

Answer 1

I know I am late to post this but it could help others who are new to this problem.

IT IS BETTER TO USE react-moment with ease

REQUIREMENTS; moment, react-moment

import React from 'react'
import Moment from 'react-moment'

const UpdatesTheTime = () => {
    return (
        <Moment interval={1000} fromNow>
            {reminder.dueDate}
        </Moment>
    )
}

export default UpdatesTheTime

it will update every second as I set the interval to 1000

to see result watch it changes after 1 minute mark

I USE TIMESTAMP like this 1590115433736 for the time value and it works well

see https://openbase.io/js/react-moment for further info

there is parse or format that you can use for your time value.

Example < Moment parse="YYYY-MM-DD HH:mm" />