Solution 1 :

The issue here is that you are rendering three rows of squares and have not assigned any width or height to the row.
I was able to solve this issue by making row’s display as flex.

You can check the code here:

Problem :

I am building a TicTacToe using React Hook. While the TicTacToe is working fine, the buttons are changing position on click. Image 1 is the initial game board, and image 2 is after clicking on the button! it is going down. If I click on consecutive three buttons it goes to the previous position (image 3).
I want the buttons not to change position when a player clicks on it

image link here

import React, {useState} from 'react';

function Square (props){
        <button className = "button" onClick = {props.onClick}>

function Board(){
    const [boardSquares, setBoardSquares] = useState(Array(9).fill(null));
    const [xIsNext, setXIsNext] = useState(true);

    const handleClick = index =>{
        const squares = [...boardSquares]; 

        if( whoIsTheWinner(boardSquares) || squares[index]) return; // if this already has a value return
        //add X or O
        squares[index] = xIsNext ? "X" : "O";
        //calculate next turn
        //set the state of the board
        //set the state of the turn

    //create a render square function
    //takes an index and return a square with correct value and function
    const renderSquare = (index) => {
        return <Square value={boardSquares[index]} onClick={()=>handleClick(index)}/>
    //create the board
    //calculates winner
    let status ;
    const winner = whoIsTheWinner(boardSquares);
    status = winner ? 
    `Winner is: ${winner}` :
    `Next player: ${xIsNext ? "X" : "O"}`; 
    function whoIsTheWinner(squares){
            const winningLine = [
                [0, 1, 2],
                [0, 3, 6],
                [0, 4, 8],
                [1, 4, 7],
                [2, 5, 8],
                [3, 4, 5],
                [6, 7, 8],
                [0, 4, 8]
               for (let i=0; i < winningLine.length; i++){
                   const [a,b,c]=winningLine[i];
                   if (squares[a] && squares[a] === squares[b] && squares[b]===squares[c])
                   return squares[a]; 
            return null;
                {/* who's turn is it? */}
            {/* this div below is one row */}

export default Board;
  width: 150px;
  height: 150px;
  background-color: greenyellow;
  margin: 0;
  padding: 0;


  background-color: grey;

  background-color: palegreen;

 background-image: url("../src/image/refresh.jpg"); 
 background-color: transparent;
 background-repeat: no-repeat;
 width: 41px;
 height: 41px;
<script src=""></script>
<script src=""></script>


Leave a Reply

Your email address will not be published. Required fields are marked *