Можете помочь - весь день не могу разобраться что не так. Наверное дело в какой то мелочи :
export default function Game() {
const [rec, setRec] = useState({
history: [
{
squares: Array(9).fill(null)
}
],
xIsNext: true
});
function handleClick(i) {
const history = rec.history;
const current = history[history.lenght - 1];
const squares = current.squares.slice();
if (calculateWinner(squares) || squares[i]) {
return;
}
squares[i] = rec.xIsNext ? "X" : "0";
setRec({
history: history.concat([
{
squares: squares
}
]),
xIsNext: !setRec.xIsNext
});
}
const history = rec.history;
const current = history[history.lenght - 1];
const winner = calculateWinner(current.squares);
let status;
if (winner) {
status = "Winner is " + winner;
} else {
status = "Next turn: " + (setRec.xIsNext ? "X" : "0");
}
return (
<div className="game">
<div className="game-board">
<Board squares={current.squares} onClick={(i) => handleClick(i)} />
</div>
<div className="game-info">
<div>{status}</div>
<ol>{/* TODO */}</ol>
</div>
</div>
);
}
Ругается на строку const winner = calculateWinner(current.squares); - а точнее на squares
Код проекта полностью -
https://codesandbox.io/s/gifted-haibt-vkhtc?file=/src/App.js