I want to create a gird and I already have a working code that creates the gird like I want tho the code looks ugly and is pretty slow in rendering anything that is more then 100 columns/rows long.

Is there any way to recreate the same Grid with an easier method? I'm pretty new to React and only did Java till now so I'm probably missing something or just have the wrong mindset.

Any help on improving would be appreciated.

Here is the code:

function makeRows(size) {
    let grid = []
    let disabled = 0
    let currentFieldDisabled = true
    document.documentElement.style.setProperty('--grid-cols', +size + 1);
    for (let c = 0; c < ((+size + 1) * size); c++) {
        if (c % size === 0) {
            grid.push(<label className="grid-item" for={"grid-item" + (c + 1)}>test</label>)
        }

        if (disabled === c) {
            disabled = disabled + +size;
            currentFieldDisabled = true;
        }

        if (c / size < 1) {
            grid.push(<label className="grid-item" for={"grid-item" + (c + 1)}>test</label>)
        } else {
            if (currentFieldDisabled) {
                currentFieldDisabled = false;
                disabled++;
                grid.push(<input disabled={true} type="text" placeholder="X" id={"grid-item" + (c + 1)} className="grid-item"/>)
            } else {
                grid.push(<input type="text" id={"grid-item" + (c + 1)} className="grid-item"/>)
            }
        }
    }
    return grid
}

The goal of the code is to create a grid that has as many fields as the size that was given to the power of 2 so if we put it 10 we get a grid with 100 fields. Now because every field should have their coordinates so to say there should be a title for every field at the top horizontally and on the left side vertically so the size is increased by one to get 1 row more at the top and one more column to the right to have space for the titles/coordinates. Just imagine it like a chess board just coordinates at a different place.

And the next goal is to make a line of disabled fields from top left to bottom right, so that when 2 coordinates are the same the field should be disabled, and because the coordinates on both the left side and the top should at the end always be the same it would always be a disabled line from top left to bottom right.

Now is there any way to make the code more refined and better performance? There are many instances in my application where the grid should render more then size 100 and it takes exponentionally longer to load at that point.

Sorry for my bad English and thank you in advance :)