Soy bastante nuevo en javascript y en reaccionar, pero me estoy sumergiendo y creando mi primera aplicación de reacción.

Estoy tratando de modificar la cantidad de "gridTemplateRows" que se muestran en mi pantalla a través de una variable y modificarlo con nuevos números según los resultados de la lista (lo he codificado como 6 en este momento), sin embargo yo Estoy usando módulos CSS y parece que no puedo hacer que la cuadrícula cambie su recuento de filas y se muestre correctamente.

Código de componente

 import classes from "./TimeSlot.module.scss"; import AvailabilityCalendarData from "../../../../../FakeDB/AvailabilityCalendarData"; function TimeSlot() { const addTimeSlot = () => { document.getElementsByClassName( `${classes.time_interval}` ).styles.gridTemplateRows = "repeat(6, 1fr)"; }; const timeSlotRow = AvailabilityCalendarData.map((timeSlot) => ( <div key={timeSlot.id}>{timeSlot.startTime}</div> )); return ( <div className={classes.time_interval} onLoad={addTimeSlot()}> {timeSlotRow} </div> ); } export default TimeSlot;

CSS

 .time_interval { grid-area: time; display: grid; grid-template-rows: repeat(17, 1fr); font-size: 14px; & > div { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-shadow: inset 0 1px 0 0 #eceff1; } }