import './App.css';
import Board from './component/Board';
function App() {
return (
<div className="App">
<Board />
</div>
);
}
export default App;
import React,{useState} from 'react'
import Board from './Board'
function Game() {
const [xIsNext, setXIsNext] = useState(true);
const [history, setHistory] = useState([Array(9).fill(null)]);
const currentSquares = history[history.length - 1]; //?
function handlePlay(nextSquares) {
// TODO
setHistory([...history, nextSquares]);
setXIsNext(!xIsNext);
}
return (
<div className='game'>
<div className="game-board">
<Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
</div>
<div className="game-info">
<ol></ol>
</div>
</div>
)
}
export default Game
import React, { useState } from 'react';
import Square from './Square';
export default function Board({ xIsNext, squares, onPlay }) {
// const [squares, setSquares] = useState(Array(9).fill(null));
// const [xIsNext, setXIsNext] = useState(true);
function handleClick(i) {
if (squares[i] || calculateWinner(squares)) {
return;
}
const nextSquares = squares.slice();
if (xIsNext) {
nextSquares[i] = 'X';
} else {
nextSquares[i] = 'O';
}
// setSquares(nextSquares);
// setXIsNext(!xIsNext);
onPlay(nextSquares);
}
function calculateWinner(squares) {
if (!Array.isArray(squares)) {
console.error('Invalid squares array. Not an array:', squares);
return null;
}
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (
squares[a] &&
squares[b] &&
squares[c] &&
squares[a] === squares[b] &&
squares[a] === squares[c]
) {
return squares[a];
}
}
console.error('No winner found. Current state of squares:', squares);
return null;
}
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
}
return (
<>
<div className="status">{status}</div>
<div className="board-row">
<Square value={squares[0]} onSquareClick={() => handleClick(0)} />
<Square value={squares[1]} onSquareClick={() => handleClick(1)} />
<Square value={squares[2]} onSquareClick={() => handleClick(2)} />
</div>
<div className="board-row">
<Square value={squares[3]} onSquareClick={() => handleClick(3)} />
<Square value={squares[4]} onSquareClick={() => handleClick(4)} />
<Square value={squares[5]} onSquareClick={() => handleClick(5)} />
</div>
<div className="board-row">
<Square value={squares[6]} onSquareClick={() => handleClick(6)} />
<Square value={squares[7]} onSquareClick={() => handleClick(7)} />
<Square value={squares[8]} onSquareClick={() => handleClick(8)} />
</div>
</>
);
}
import React, { useState } from 'react';
import './Square.css';
export default function Square({ value, onSquareClick }) {
return <button className="square" onClick={onSquareClick}>{value}</button>;
}
Above is my code. I am a beginner who studies by looking at the official document, and although it seems to have been written in the same way, I keep getting errors like the one in the picture.
What’s the problem? Please help me
I’ve read the official documentation several times, but I just can’t figure it out…