How to make a shorter ternary conditional operator in a React functional component?

user_17263750 0
Viewed 52

I made a countdown timer in React using useState and useEffect hooks; everything is working great however the ternary conditional operator for seconds, where I am prepending 0 and replacing the counter value 0 with 00 for display purposes seems a bit excessive. Is there a way to simplify/shorten this, maybe setting Math.floor((counter % (1000 * 60)) / 1000) to a variable in the return ()? Not sure how to do this in React.

return (
  <div className={styles.timer}>
    <span className={styles.minutes}>
      {Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))}
    </span>
    <span className={styles.colon}>:</span>
    <span className={styles.seconds}>
      {Math.floor((counter % (1000 * 60)) / 1000) === 0 ?
      `00` :
      Math.floor((counter % (1000 * 60)) / 1000) < 10 ?
      `0${Math.floor((counter % (1000 * 60)) / 1000)}` :
      Math.floor((counter % (1000 * 60)) / 1000)
      }
    </span>
  </div>
)
reactjs conditional-operator javascript
3 Answers

Turn it into a string, then .padStart with '0' to 2 characters.

<span className={styles.seconds}>
  {
    String(Math.floor((counter % (1000 * 60)) / 1000))
      .padStart(2, '0')
  }
</span>
user_95152070

You can simply move this logic in some some function and call that function here.


handleCounter = (counter) => {
  let floorValue = Math.floor((counter % (1000 * 60)) / 1000)
  if(floorValue < 10){
    return '0' + floorValue
  } else {
    return '' + floorValue
  }
}
return (
  <div className={styles.timer}>
    <span className={styles.minutes}>
      {Math.floor((counter % (1000 * 60 * 60)) / (1000 * 60))}
    </span>
    <span className={styles.colon}>:</span>
    <span className={styles.seconds}>
      {this.handleCounter(counter)}
    </span>
  </div>
)
user_96244350

I think it's a bit excessive too. You won't be able to define the variable in the return method, instead you can solve that problem in this way. You can add state count which has the value of Math.floor((counter % (1000 * 60)) / 1000)

So the component would be like this

function Timer () {
  const [ counter, setCounter ] = useState(0)
  const [ count, setCount ] = useState(0)
  useEffect(() => {
    var timer

    setTimeout(timer = function () {
      setCounter(counter + 1000)
      setCount(Math.floor(((counter + 1000) % (1000 * 60)) / 1000))
    }, 1000)
    return () => {
      clearTimeout(timer)
    }
  }, [counter])

  return (
    <div style={{color: 'white'}}>
      <span>
        {Math.floor(count / 60)}
      </span>
      <span>:</span>
      <span>
        {count === 0 ?
        `00` :
        count < 10 ?
        `0${count}` :
        count
        }
      </span>
    </div>
  )
}

Hope this is useful for you..

user_184562850
Related