@StasUssov

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

Добрый день,

в процессе изучения React и JS возник вопрос:

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

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

Заранее спасибо!
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
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(count)].map((n, i) => <div className="item">{i}</div>)}
      </div>
    </div>
  );
}

https://jsfiddle.net/s6ho7bt0/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Psixodelik
@Psixodelik
Преподаватель на Hexlet
В state вводишь переменную, с начальным значением null. При изменении этого числа выполняешь функцию (которая изначально задана и следит за тем, чтобы значение было не null), которая и отрисовывает нужное количество элементов.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы