Как заполнить и вывести значение массива справа налево с помощью Input?

Question

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

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

Код

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

Answer 1

так?

import React, { useEffect, useState } from 'react'

export const Main = () => {
    const [val,SetVal] = useState(['2','1'])
    const [value,setValue] = useState('')

    const changeHandler = (e) => {
        if(val.length > 4) {
            return
        }
        setValue(() => e.target.value)
    }
    useEffect(() => {
        SetVal((prev) => [value[value.length - 1],...prev])
    }, [value])

    return (
      <>
        <input
          type="text"
          value={value}
          onChange={changeHandler}
        />
        <div>
          {val}
        </div>
      </>
    );
}

БЛОГ НА HUSL

Как заполнить и вывести значение массива справа налево с помощью Input?

Ответы (1 шт):