why the Button changing position onClick?

user_7406135 0
Viewed 290

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).

tictactoe

tictactoe

I don't want the buttons to change the position.

my code is like below: 

import React, {useState} from 'react';

    import Square from './Square';
    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;       
            squares[index] = xIsNext ? "X" : "O";
            setBoardSquares(squares);
            setXIsNext(!xIsNext);


        };
           const renderSquare = (index) => {
            return <Square value={boardSquares[index]} onClick={()=>handleClick(index)}/>
        };
       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]
                   ];
                   console.log(winningLine)
                   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;
                };

        return(
            <div>
                <div>               
                   {status}
                </div>
                <div>
                    {renderSquare(0)}
                    {renderSquare(1)}
                    {renderSquare(2)}
                </div> 
                <div>
                    {renderSquare(3)}
                    {renderSquare(4)}
                    {renderSquare(5)}
                </div> 
                <div>
                    {renderSquare(6)}
                    {renderSquare(7)}
                    {renderSquare(8)}
                </div>  

            </div>
        );
    }

    export default Board;

the CSS code is: 

.button {
  width: 150px;
  height: 150px;
  background-color: greenyellow;
  margin: 0;
  padding: 0;
}

.button:active {
  background-color: grey;
}

.button:hover {
  background-color: palegreen;
}
reactjs button css javascript
2 Answers

I also come to this trouble and have narrowed it down to because of empty text in the button. If the button text were not empty the button position wouldn't move after a click for a reason that I still don't understand.

the workaround for the problem:

    function Board(){
        ....
        ....Array(9).fill("\0"));
        ....
user_57040570

This issue is related to the display of your Square components. To solve it, you'll need to modify the CSS properties of your Square component.

Navigate to the CSS file of your Square component.

Look at the CSS properties that you have affected to the class .button of your Square component buttons. It should include the float:left; property as below:

.button {
    width: 150px;
    height: 150px;
    background-color: greenyellow;
    margin: 0;
    padding: 0;
    float: left;
}

Also make sure that you import your Square CSS file into your Square component JS file.

user_196898100
Related