Search code examples
javascriptreactjsdatetimetimedatetime-conversion

Inline function in React isn't running

I am trying to convert a time string that is formatted as 24 hour into 12 hour. To do this, I created a function that will reformat then render it. However, when I place the function inline like <span>{times && this.renderTime(times.StartTime)}</span>in the correct location, nothing runs.

But, when I place the same function on a test button, it will run and log my newly formatted text. For example, 15:41 to 3:41 PM.

  renderTime = time => e => {
    const hours = time.split(':')[0];
    const minutes = time.split(':')[1];
    let currentTime;

    if (+hours === 0) currentTime = `12:${minutes} AM`;
    else if (+hours < 10 && +hours > 0) currentTime = `${hours.split('')[1]}:${minutes} AM`;
    else if (+hours <= 11 && +hours > 9) currentTime = `${hours}:${minutes} AM`;
    else if (+hours === 12) currentTime = `12:${minutes} PM`;
    else currentTime = `${hours-12}:${minutes} PM`;

    console.log(currentTime);

    return <p>{currentTime}</p>
  }

Why will this function not run within the text

Solution

  • your function is returning a function - change

    time => e =>

    to

    time =>