Как отобразить n-ое количество элементов на странице, на основании введенного числа в форму?

Question

[StasUssov]

Есть страница с полем для ввода числа. После ввода числа, нужно отобразить введенное количество элементов (любых, пусть будут квадраты) на странице и выровнять их по 5 в ряд. Например, вводим в поле 10 и отображается 10 элементов в два ряда по 5.

Какая функция бы помогла с этим?

Answer 1

[0xD34F]

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

function App() {
  const [ count, setCount ] = useState(0);
  const onChange = e => setCount(Math.max(0, e.target.value | 0));

  return (
    <div>
      <input type="number" value={count} onChange={onChange} />
      <div className="container">
        {Array.from(Array(count).keys(), n => <div className="item">{n}</div>)}
      </div>
    </div>
  );
}

https://jsfiddle.net/08yjdfrw/

Comments

[n1ksON]

Можно добавить useEffect и useRef. useEffect будет отслеживать изменение value в input и выполнять соответствующие действия (добавлять элементы на страницу)

[StasUssov]

Спасибо!

Answer 2

[Никита Михайлов]

В state вводишь переменную, с начальным значением null. При изменении этого числа выполняешь функцию (которая изначально задана и следит за тем, чтобы значение было не null), которая и отрисовывает нужное количество элементов.

Разбитие элементов по 5 это уже просто. Можешь в цикле проверять. Можешь отрисовать всё сразу и правильно располагать всё с помощью CSS