Как вывести индексы массива в обратном порядке?

Question

[DyadkoOrest]

У меня есть инпут, куда пользователь вводит число, и это число отображается через span. Пользователь может ввести максимум 4 числа. Каждый раз, когда пользователь вводит число, оно сопоставляется с массивом и выводиться по индеску. Value я получаю как пропсы. Там может быть двузначное и трёхзначное число и тогда я его разбиваю и вывожу через span. Например, если мне придет число 45, то оно не будет будет отображаться как 45, а разобьется на 4 и 5 и выведется.
Сейчас это работает так:

Шаг 1 
У меня есть  4 5 -  - 
Шаг 2 
Я пишу цифру '8' 
У меня  4 5 8 -
Шаг 3 
Я пишу цифру 9 
У меня 4 5 8 9

Я стараюсь сделать так, чтобы когда пользователь вводит числа, они появлялись не слева направо, а справа налево и заменяли пустые поля если они есть.
То есть:

Шаг 1 
У меня есть  - - 4 5 
Шаг 2 
Я пишу цифру '8' 
У меня   - 4 5 8 
Шаг 3 
Я пишу цифру 9 
У меня 4 5 8 9

Мой код:

<div>
      <input type='text' maxLength={4} value={value} onChange={(e) => onChange(e.target.value)} />
      <div >
        {Array(4)
          .fill('')
          .map((it, i) => (
            <span key={i}>{value[i]}</span>
          ))}
      </div>
    </div>

Решение

<span key={i}>{value.toString () [length - i - 1]}</span>

неправильное, поскольку числа отображаются не в таком порядке как я описал выше.

Answer 1

[Rsa97]

<span key={i}>{value[i - 4 + value.length] ?? '-'}</span>

Answer 2

[0xD34F]

Не надо никакие индексы трогать, достаточно дополнить строку спереди до нужной длины:

const max = 4;

<div>
  {Array.from(
    value.padStart(max, '-'),
    n => <span>{n}</span>
  )}
</div>