How to Modify CSS Module Style via Javascript-CodePudding

I'm fairly new to javascript and react, but I'm diving in and creating my first react app.

I'm tying to modify the amount of "gridTemplateRows" that display on my screen via a variable and modify it with a new numbers based on the results from the list (I've hard coded this as a 6 right now), however I'm using CSS Modules and i can't seem to get the grid to change its row count and display properly.

Component Code

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} onl oad={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;
  }
}

CodePudding user response：

Just set the style:

<div className={classes.time_interval} 
  style={{ gridTemplateRows: `repeat(${timeSlotRow.length}, 1fr)` }}
>{timeSlotRow}</div>

Or you could take a look at grid-auto-rows.