A
A
Alexander Osadchy2021-10-23 03:17:21
React
Alexander Osadchy, 2021-10-23 03:17:21

How to wrap each character in a span?

There is a timer on the page, consists of days, minutes and seconds.

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>


where, for example, seconds - displays the integer '57'.

But how can I wrap each character in a separate span for styling - I'll never know.

so you need:
<span>5</span><span>7</span>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Osadchiy, 2021-10-23
@DELUX

And that's it, I did it ...
Suddenly it will come in handy for someone:

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

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question