Как обернуть каждый символ в span?

Question

[Александр Осадчий]

Есть таймер на странице, состоит из дней, минут и секунд.

const { days, hours, minutes, seconds } = useCountdown(countdownDate);

<div className={styles.timer}>
      <div className={styles.item}>
        <div>{days || 0}</div>
        <span>days</span>
      </div>
      <div className={styles.item}>
        <div>{hours || '00'}</div>
        <span>hr</span>
      </div>
      <div className={styles.item}>
        <div>{minutes || '00'}</div>
        <span>min</span>
      </div>
      <div className={styles.item}>
        <div>{seconds || '00'}</div>
        <span>sec</span>
      </div>
    </div>

где, например seconds - выводит цельное число '57'.

А вот, как мне обернуть каждый символ в отдельный спан для стилизации - ума не приложу.

так нужно:
<span>5</span><span>7</span>

Answer 1

[Александр Осадчий]

А все, справился...

Вдруг кому пригодится:

const addSpan = (note: any) => {
    return [...note].map((letter) => <span>{letter}</span>);
  };

<div>{addSpan(seconds) || '00'}</div>

Comments

[WbICHA]

(note: any)

Обожаю качественную типизацию.