Similiar questions of this nature have the problem of something new using setState/a hook. I actually am though, and I'm still seeing an issue where my "Piece" components are not taking on new values even after the boardData state is changed.

Here is an image so you can see the data is definitely being changed when a piece is clicked, but it is not visually changing anything.

Here is my code:

Board.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

Piece.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

Any help would be appreciated, thanks!