How to change colour of boxes in a grid

I’ve created a grid with boxes in it that each has an id of box + i. However when i try to add an on click function to change the colour of the box it doesn’t allow me to. Here is the code:

function Board() {
    
    var rows = []
    var numrows = 1000;
    for(var i = 0; i < numrows; i++){
        rows.push(<Box id={"box" + i}  tabIndex="0" onClick={
            document.getElementById(`box${i}`).style.backgroundColor = "red"

        } className="box"  />);
    }

    return (
       <GameBoard>
           {rows}
       </GameBoard>
    )
}

export default Board

Answer

The onClick prop on Box should be a function

<Box
 id={"box" + i}
 tabIndex="0"
 onClick={() => {
            document.getElementById(`box${i}`).style.backgroundColor = "red"
        }
 }
 className="box"
/>

PS: Don’t forget to use the id prop in actual DOM element e.g. in definition of Box component

const Box = ({id, /*... rest props*/}) => {
   return (
      <div id={id}> {/* assign ID to real DOM node so it's accessible in document.getElementById*/}
       {/* rest of the Box component definition*/}
      </div>
 )
}