0

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.

enter image description here

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!

CobaltGecko
  • 188
  • 9
  • `newBoard[row][col] = 1;` Don't mutate state in React – CertainPerformance Apr 28 '22 at 00:08
  • but that's not a react state, right? It's a copy of data from an array – CobaltGecko Apr 28 '22 at 00:10
  • The nested array is indeed part of the existing state. You only made a shallow copy of the array - the subarrays are still direct state. – CertainPerformance Apr 28 '22 at 00:11
  • JSON.parse(JSON.stringify(boardData)) just seems so clumsy, is that really the best solution for this? Java would have like Arrays.DeepCopy(). I'm shocked to see it be something so unintuitive (at least to me) – CobaltGecko Apr 28 '22 at 00:15
  • https://stackoverflow.com/questions/13756482/create-copy-of-multi-dimensional-array-not-reference-javascript – CertainPerformance Apr 28 '22 at 00:16
  • Thank you, also taking a deepcopy still did not make it work actually. const newBoard = JSON.parse(JSON.stringify(boardData)) console.log(newBoard) newBoard[row][col] = 1; setBoardData(newBoard) – CobaltGecko Apr 28 '22 at 00:16
  • In Piece you're retrieving the value from local state, not from the prop - your local state is out of sync. (Drop the local state entirely.) – CertainPerformance Apr 28 '22 at 00:17
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/244271/discussion-between-cobaltgecko-and-certainperformance). – CobaltGecko Apr 28 '22 at 00:19

0 Answers0