Tic tac toe react state not updating - reactjs

Question

I am learning react and i am trying to build the tic tac toe game using the documentation, however using functional components on my own.
This is what I have done till now
app.js
function App() {
return (
<div className="App">
<Game />
</div>
);
}
Game.js
const styles = {
width: "200 px",
margin: "20px auto",
};
function Game() {
const [board, setBoard] = useState(Array(9).fill(""));
const [xIsNext, setXIsNext] = useState(true);
const winner = calculateWinner(board);
const handleClick = (i) => {
const boardCopy = [...board];
if (winner || boardCopy[i]) return;
boardCopy[i] = xIsNext ? "X" : "O";
setBoard(boardCopy);
setXIsNext(!xIsNext);
};
function renderMoves() {
return <button onClick={() => Array(9).fill(null)}> Start Game</button>;
}
return (
<>
<Board onClick={handleClick} squares={board} />
<div style={styles}>
<p>
{winner ? "Winner " + winner : "Next player" + (xIsNext ? "X" : "O")}
{renderMoves()}
</p>
</div>
</>
);
}
Board.js
function Board({ onClick, squares }) {
const style = {
border: "4px solid darkblue",
borderRadius: "10px",
width: "250px",
height: "250px",
margin: "0 auto",
display: "grid",
gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)",
};
return (
<div style={style}>
{squares.map(
(square, i) => (
console.log(square),
(
<Square
key={i}
value={square}
onClick={() => onClick("dummy value")}
/>
)
)
)}
</div>
);
}
Button.js
function Square({ value, onClick }) {
return (
<button style={style} onClick={onClick}>
{value}
</button>
);
}
At this point in the code the game is functional and user should be able to play the game.
However, in my current code, when you click on Square nothing appears.
I checked in Game.js, the logic for handleClick() is same as the online documentation. These lines handle the logic for showing "X" and "O"
const boardCopy = [...board];
if (winner || boardCopy[i]) return;
boardCopy[i] = xIsNext ? "X" : "O";
setBoard(boardCopy);
setXIsNext(!xIsNext);
it creates a shallow copy of the original board and updates the original board state with the new one.
in Board.js, I put a console.log(square) to see what is being passed here, this shows NULL.
After the state is updated the console.log() show say X or O right?
What am I doing wrong here?
PS - I also one side question,
1)since I am new to this what is the difference of use between writing functions like below, both work perfectly so which should be used when?
function test({i}){
}
and
const test = (i) =>
{
}

Answer 1

here you are not doing nothing onClick, looks like onClick takes a parameter "i" but your passing "dummy value"
<Square
key={i}
value={square}
onClick={() => onClick("dummy value")}
/>
it should be something like
function Board({ handleClick, squares }) {
<Square
key={i}
index={i}
value={square}
handleClick={handleClick}
/>
function Square({ value, index, handleClick}) {
return (
<button style={style} onClick={() => handleClick(index)}>
{value}
</button>
);
}