Quiero crear una cuadrícula y ya tengo un código de trabajo que crea la cuadrícula como quiero, aunque el código se ve feo y es bastante lento para representar cualquier cosa que tenga más de 100 columnas/filas de largo.

¿Hay alguna forma de recrear la misma cuadrícula con un método más fácil? Soy bastante nuevo en React y solo hice Java hasta ahora, así que probablemente me estoy perdiendo algo o simplemente tengo la mentalidad equivocada.

Cualquier ayuda para mejorar sería apreciada.

Aquí está el código:

 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 }

El objetivo del código es crear una cuadrícula que tenga tantos campos como el tamaño que se le dio a la potencia de 2, por lo que si le ponemos 10 obtenemos una cuadrícula con 100 campos. Ahora, debido a que cada campo debe tener sus coordenadas, por ejemplo, debe haber un título para cada campo en la parte superior horizontalmente y en el lado izquierdo verticalmente, por lo que el tamaño aumenta en uno para obtener 1 fila más en la parte superior y una columna más en la parte superior. derecho a disponer de espacio para los títulos/coordenadas. Solo imagínalo como un tablero de ajedrez que simplemente se coordina en un lugar diferente.

Y el próximo objetivo es hacer una línea de campos deshabilitados desde la parte superior izquierda hasta la parte inferior derecha, de modo que cuando 2 coordenadas sean iguales, el campo debe estar deshabilitado, y porque las coordenadas tanto en el lado izquierdo como en la parte superior deben estar siempre al final. ser lo mismo, siempre sería una línea deshabilitada de arriba a la izquierda a abajo a la derecha.

Ahora, ¿hay alguna forma de hacer que el código sea más refinado y mejor rendimiento? Hay muchos casos en mi aplicación en los que la cuadrícula debe representar más de un tamaño de 100 y tarda exponencialmente más en cargarse en ese punto.

Lo siento por mi mal inglés y gracias de antemano :)