Preguntas similares de esta naturaleza tienen el problema de algo nuevo usando setState/a hook. Sin embargo, en realidad lo estoy, y sigo viendo un problema en el que mis componentes de "Pieza" no toman nuevos valores incluso después de que se cambia el estado de boardData.

Aquí hay una imagen para que pueda ver que los datos definitivamente se cambian cuando se hace clic en una pieza, pero no cambia nada visualmente.

Aquí está mi código:

Tablero.jsx

 import Piece from "./Piece"; import "./style.css"; import {useEffect, useState} from "react"; const defaultBoardData = [ [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0], ] const Board = () => { const [boardData, setBoardData] = useState(defaultBoardData) const changeBoardValue = (row, col) => { const newBoard = [...boardData] newBoard[row][col] = 1; setBoardData(newBoard) } useEffect(() => { console.log(boardData) }, [boardData]) return ( <div id="board"> { boardData.map((row, rowIndex) => ( <div key={rowIndex} className="board-row"> {row.map((column, colIndex) => ( <Piece key={rowIndex + colIndex} onClick={() => changeBoardValue(rowIndex, colIndex)} value={boardData[rowIndex][colIndex]}/> ))} </div> )) } </div> ) } export default Board

Pieza.jsx

 import {useEffect, useState} from "react"; import whiteCircle from "./images/whiteCircle.png" import yellowCircle from "./images/yellowCircle.png" import redCircle from "./images/redCircle.png" import "./style.css" const Piece = (props) => { const [value, setValue] = useState(props.value); console.log(value) const getImage = () => { if (value === 0) { return whiteCircle } else if (value === 1) { return yellowCircle } else { return redCircle } } let image = getImage(); return ( <div onClick={props.onClick}> <img src={image} alt=""/> </div> ) } export default Piece

¡Cualquier ayuda será apreciada, gracias!