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

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>
)

CodePudding user response：

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>

CodePudding user response：

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>
)

CodePudding user response：

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..