0

I looked through SO as much as possible for integrating a durations library into React, but can't find concrete examples in a React context. Sorry if this is a newbie question, I've been working and searching on this issue for a while through the momentjs issues and various other means.

I'm trying to work out how to call a duration method in React for a JS library using either humanize-duration or moment-duration-format. For instance, I try to call humanize-duration in my component:

import React, { Fragment } from 'react'
import NumberFormat from 'react-number-format'
import humanizeDuration from 'humanize-duration';    


export default function ProductDetails({ time_inventoried, total_time_staged  }) {
    return <tr>      
      <td>humanizeDuration({time_inventoried})</td> //860 days 03:34:17.564021 before format
      <td>humanizeDuration({total_time_staged})</td>  // # of seconds  before format
  </tr>
}

Trying to call this using typical instructions, as attempted above, renders only an unprocessed result in parentheses. What is the correct way to render this in React?

Boucherie
  • 541
  • 4
  • 20
  • 1
    `humanizeDuration(...)` outputs that exact text. `{...}` evaluates JavaScript. You want to evaluate `humanizeDuration(time_inventoried)` - so your curlies are in the wrong spot. Surely you mean `{humanizeDuration(time_inventoried)}`? – Amadan Dec 28 '18 at 04:22
  • Ah, it was exactly that. I'm trying to get the DateTime object one working in momentjs now, but humanize-duration works exactly this way, and I expect the other will follow accordingly :) – Boucherie Dec 28 '18 at 05:01

1 Answers1

1

Have you tried putting your js statements inside curly braces {}

import React, { Fragment } from 'react'
import NumberFormat from 'react-number-format'
import humanizeDuration from 'humanize-duration';    


export default function ProductDetails({ time_inventoried, total_time_staged  }) {
    return <tr>      
      <td>{humanizeDuration(time_inventoried)}</td> //860 days 03:34:17.564021 before format
      <td>{humanizeDuration(total_time_staged)}</td>  // # of seconds  before format
  </tr>
}
Dasith
  • 1,085
  • 10
  • 16