Part 2 Help Player X Win (20 points) There is a mathematical strategy to win or at least draw at every game of tic tac toe. There are strategies based on if youre the first or second player. You are going to force player X to make its first two moves based on a winning strategy. Here is the strategy:

Move 1

Player Xs first move must be in a corner square ANY corner. If player X tries to place its first move anywhere other than a corner, display a message below the board that says, Not a good choice! and dont let the X appear in the square. If player X clicks a corner square, display a message that says, Good choice! and let the X appear.

Move 2 O is in the center Player Xs second move is based on where O places its first O. If there is an O in the center square, you cannot win unless O makes a mistake, but you can force a draw. For Xs second move, it must place an X in a straight diagonal from its first X. If X tries to place an X anywhere, but on the diagonal, print a message below the board that says, Not a good choice!, otherwise print Good choice!.

Move 2 O is NOT in the center

If there is not an O in the center, X is guaranteed to win if it places its second X as follows. X must place its next X in a corner with a blank space between it and its first X. However, the blank space cannot be the center square. These are just two examples of acceptable second moves.

Dont put the second X on the diagonal from the first X.

Dont put the second X if there is an O between it and the second X.

X is guaranteed to win now over the next two moves. You do not need to implement the third and fourth move. This is just so you can see the full winning strategy. Winning Strategy O is now forced to block you from winning.

Now X should place its third X in a way that sets it up for a double win.

X can win on the diagonal or the third column. You only need to set X up with its first two moves. If youd like to control moves three and four you can, but its not required.

For an example of a working solution go to: https://effervescent-figolla-a8415d.netlify.app/

THIS IS THE CODE I HAVE CURRENTLY!! PLEASE HELP ME IMPLEMENT THE FUNCTION HANDLE CLICK!! THANK YOU

import React from 'react';

import { useState } from 'react';

function Square({value, onSquareClick}) {

return (

);

}

export default function Board() {

const [xIsNext, setXIsNext] = useState(true);

const [squares, setSquares] = useState(Array(9).fill(null));

function handleClick(i) {

if (calculateWinner(squares) || squares[i]) {

return;

}

const nextSquares = squares.slice();

if (xIsNext) {

nextSquares[i] = 'X';

} else {

nextSquares[i] = 'O';

}

setSquares(nextSquares);

setXIsNext(!xIsNext);

}

const winner = calculateWinner(squares);

let status;

if (winner) {

status = 'Winner: ' + winner;

} else {

status = 'Next player: ' + (xIsNext ? 'X' : 'O');

}

return (

{status}

handleClick(0)} />

handleClick(1)} />

handleClick(2)} />

handleClick(3)} />

handleClick(4)} />

handleClick(5)} />

handleClick(6)} />

handleClick(7)} />

handleClick(8)} />

);

}

function calculateWinner(squares) {

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;

}