Tic Tac Toe - rs-hash/Learning GitHub Wiki

const Square = ({ value, onSquareClick }) => {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
};

export default Square;

import Square from "./Square";
import { useState } from "react";

const Board = () => {
  const [square, setSquare] = useState(Array(9).fill(null));
  const [isNextClickX, setNextClick] = useState(true);

  const handleClick = (i) => {
    const copysquare = square.slice();
    isNextClickX ? (copysquare[i] = "X") : (copysquare[i] = "O");
    setSquare(copysquare);
    setNextClick(!isNextClickX);
  };
  return (
    <>
      <div className="row">
        <Square value={square[0]} onSquareClick={() => handleClick(0)}></Square>
        <Square value={square[1]} onSquareClick={() => handleClick(1)}></Square>
        <Square value={square[2]} onSquareClick={() => handleClick(2)}></Square>
      </div>
      <div className="row">
        <Square value={square[3]} onSquareClick={() => handleClick(3)}></Square>
        <Square value={square[4]} onSquareClick={() => handleClick(4)}></Square>
        <Square value={square[5]} onSquareClick={() => handleClick(5)}></Square>
      </div>
      <div className="row">
        <Square value={square[6]} onSquareClick={() => handleClick(6)}></Square>
        <Square value={square[7]} onSquareClick={() => handleClick(7)}></Square>
        <Square value={square[8]} onSquareClick={() => handleClick(8)}></Square>
      </div>
    </>
  );
};

export default Board;