I'm making a sudoku game and have a variable for the board at the moment and the original board. When the user inputs a number the board is updated but for some reason the originalBoard variable is also. I only change the value of board so I'm not sure why originalBoard is also updated.
input code:
export default function Block(props) {
let { boxNumber, blockNumber } = props
const { board, originalBoardSlots, isSolved } = useBoard()
const dispatch = useDispatch()
const number = board[boxNumber][blockNumber]
let numberInput;
let border = ""
if(blockNumber === 2 || blockNumber === 5)
border += " b-right"
if(boxNumber === 2 || boxNumber === 5)
border += " b-bottom"
if(originalBoardSlots[boxNumber][blockNumber]){
numberInput = (
<input
type="number"
className={'number og-number' + border}
value={number}
min="0"
max="9"
disabled
/>
)
}else {
numberInput = (
<input
type="number"
className={'number non-og-number' + border}
value={number !== 0 ? number : ""}
min="0"
max="9"
onChange={(e) => handleChange(e)}
disabled={isSolved}
/>
)
}
const handleChange = (e) => {
const newNumber = e.target.value === "" ? 0 : parseInt(e.target.value)
if(newNumber <= 9 && newNumber >= 0){
dispatch({
type: "set-number-slot",
payload: {
boxNumber: boxNumber,
blockNumber: blockNumber,
number: newNumber
}
})
}
}
return (
numberInput
)}
reducer code:
case "set-number-slot":
const { boxNumber, blockNumber, number } = action.payload
state.board[boxNumber][blockNumber] = number
const newBoard = state.board
return {
...state,
board: newBoard
}
function for setting variables originally:
export default async function getBoard(){
const response = await fetch("https://sugoku.herokuapp.com/board?difficulty=easy");
const data = await response.json();
const board = await data.board
const originalBoardSlots = await board.map(box => {
return box.map(block => block !== 0)
})
const state = {
board: board,
originalBoard: board,
originalBoardSlots: originalBoardSlots
}
return state}