Как в React отрендерить множество пустых Div в виде элементов сетки?

Question

Я создаю очень большую сетку, в которой элементы сетки загораются при наведении курсора (Ссылка это для того, что я пытаюсь сделать).

Мне нужно отрендерить 2500 элементов сетки, которые все пустые div, как мне это сделать правильно? Я рассматривал возможность использования карты, но нечего отображать, учитывая, что все блоки пустые.

<div className='gridContainer'>
  //render divs here
  <div className='gridItem'/> //first
  ...
  <div className='griditem'/>  //2500th
</div>

Answer 1

Вы можете сделать что-то вроде этого.

const getEmptyDiv(number) => {
const div = "";
for(i = 0; i<number; i++) {
  div.concat('<div className='gridItem'/>');
}
// before returning convert it to string to html 
return div;

}

Answer 2

Думаю, вам нужно использовать пустой массив для сопоставления с этими div. Sth как следующее

{ Array.from(Array(2500).keys()).map(i => <div key={i} className='gridItem'/>)}