I’m making a tic-tac-toe game in react,so here i have my formula to search winner

  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[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

this is where I am implementing the game

import Board from './Board';
import calculateWinner from './calculateWinner';

export default function Game() {
  const [board, setBoard] = useState(Array(9).fill(null));
  const [history, setHistory] = useState(board);
  const [xIsNext, setXIsNext] = useState(true);
  const [step, setStep] = useState(0);
  const winner = calculateWinner(board);

  const handleClick = index => {
    const boardCopy = board.slice();
    if (winner || boardCopy[index]) return;

    boardCopy[index] = xIsNext ? 'X' : 'O';
    setBoard(boardCopy);
    setXIsNext(!xIsNext);
  };

  function startNewGame() {
    setBoard(Array(9).fill(null));
  }

  function whoIsNext() {
    if (winner) {
      return 'Выиграл ' + winner;
    } else if (!winner) {
      return 'Следующий ход: ' + (xIsNext ? 'X' : 'O');
    } else if (!xIsNext) {
      return 'tie';
    }
  }

  return (
    <div className="game">
      <button onClick={startNewGame}> Начать заново</button>

      <Board squares={board} onClick={handleClick} />

      <p>{whoIsNext()}</p>
    </div>
  );
}
import React, { Component } from 'react';
import Square from './Square';

export default function Board({ squares, onClick }) {
  return (
    <div className="game-board">
      {squares.map((square, index) => (
        <Square key={index} value={square} onClick={() => onClick(index)} />
      ))}
    </div>
  );
}

import React from 'react';

export default function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

I don’t understand how can I get a draw? Do I need to change something in the formula for calculating the winner? or what am i missing
please, help me ti understand where i have error

>Solution :

You will have to check whether there is still a square that is free to play. In other words, if board has no more null, then it is a draw. You should still check if there is a winner first, but if not, the next thing to check is whether the board is full.

Note that your if...else if... chain should end with an else that is not followed by an if: it needs to be a "catch-all"… without further condition.

Here is a suggested change to your whoIsNext function:

  function whoIsNext() {
    if (winner) {
      return 'Выиграл ' + winner;
    } else if (board.includes(null)) { // Not yet full board
      return 'Следующий ход: ' + (xIsNext ? 'X' : 'O');
    } else { // Board is full -- it is a tie
      return 'tie';
    }
  }