Todo funcionaba y luego agregué un archivo .js para reaccionar y, de repente, los movimientos no se muestran hasta que la ventana cambia de tamaño. Desde entonces he desconectado el archivo, pero sigue sin funcionar.

Solo trato de hacer funcionar un tablero de ajedrez (y sí, sé que hay un tablero.jsx, pero esto es para practicar) y conseguí que las piezas se movieran así: (esto está dentro de un constructor)

 let newBoard = this.props.boardArray; this.handleClick = (i, j) => { switch (canStartMove){ case true: if(newBoard[i][j] !== null){ move = newBoard[i][j]; alert(move); } else { break; } l = i; m = j; canStartMove = false; break; case false: if(l !== i || j !== m){ if(true){ // rules should go here, but for test purposes set to true //something about whose turn it is as well newBoard[l][m] = null; newBoard[i][j] = move; alert(newBoard[i][j]); } else { alert("that's illegal"); } } this.props.setBoardArray(newBoard); canStartMove = true; } } }

o aproximadamente así. donde actualiza una matriz que luego la traduce a .svg's

 const [boardArray, setBoardArray] = useState(initBoardArray);

donde se define initBoardArray

 const initBoardArray = [["bR", "bN", "bB", "bQ", "bK", "bB", "bN", "bR"], ["bP", "bP", "bP", "bP", "bP", "bP", "bP", "bP"], [null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null], [null, null, null, null, null, null, null, null], ["wP", "wP", "wP", "wP", "wP", "wP", "wP", "wP"], ["wR", "wN", "wB", "wQ", "wK", "wB", "wN", "wR"]];

Pero los cambios no se muestran hasta que la ventana cambia de tamaño o algo así. que definí así

 const { height, width } = useWindowDimensions(); let newSide = 0; (function resizeTheBoard() { let diagonal = Math.sqrt((height * 900 / 780) ** 2 + width ** 2); newSide = Math.SQRT2 * diagonal / 2; })();

pero tenía esta función de cambio de tamaño al principio y el problema acaba de comenzar ahora, así que... Ni siquiera estoy seguro de si el problema está aquí. También estoy usando Container de react-bootstrap, aunque también lo eliminé y el problema persiste. Si alguien tiene alguna idea o si esto tiene algún sentido, cualquier ayuda sería apreciada.