Estoy creando un tablero de sudoku que representa objetos div JSX en una cuadrícula como esta.

 newBoard.push(<div className={letnum} key={letcol} id={letcol} onClick={() => this.handleTileClick(event)}> {response.data[i][j]} </div>

Luego se agrega newBoard al estado, sin embargo, cuando hago clic en un mosaico para cambiar el HTML interno a un nuevo número, también quiero actualizar el estado al mismo tiempo. me sale el error:

 Cannot assign to read only property 'children' of object '#<Object>'

y necesito actualizar:

 this.state.board[index].props.children

ser un nuevo número. ¿Algún consejo sobre cómo hacer esto? Llevo horas haha. Aquí está el código total.

 axios.get("http://127.0.0.1:5000/new-board") .then(response => { console.log("API Response: ", response) for (let i = 0; i < 9; i++) { let letter = String.fromCharCode(97 + i) for (let j = 0; j < 9; j++) { let column = j + 1; let number = dictionary[j + 1]; let letnum = letter + " " + number + " tile"; let letcol = letter + column; newBoard.push(<div className={letnum} key={letcol} id={letcol} onClick={() => this.handleTileClick(event)}> {response.data[i][j]} </div>) } } this.setState({ board: newBoard, winningBoard: newBoard, gameWon: false }) }) handleNumberChoiceClick(event) { this.setState({ activeNumberSelector: Number(event.target.innerHTML) }) } handleTileClick(event) { const selectedTile = event.target; selectedTile.innerHTML = this.state.activeNumberSelector; const location = this.state.board.indexOf((this.state.board.find(tile=>tile.props.id === selectedTile.id))); this.setState({ activeNumberSelector: '' }) console.log(this.state.board[location].props.children) }