Build a Tic-Tac-Toe Game - (from 4 -> last)

JavaScript
1

Can’t pass test from 4th to last on Tic-Tac-Toe Game in React, but everything (seems to) works fine. Any help welcome !

.grid{
  display: grid;
  grid-template-columns: repeat(3, 40px);
  grid-gap: 10px;
  grid-auto-rows: 40px;
  margin-bottom: 20px;
}

const { useState } = React;

export function Board() {

  const [playerOne, setPlayerOne] = useState(true); //X
  const [buttons, setButtons] = useState(["", "", "", "", "", "", "", "", ""]);
  const [messageEnd, setMessageEnd] = useState(false);

  function handleClick(e) {
    if (messageEnd) return;
    const n = e.target.id;
    const arr = [...buttons];
    if (arr[n] === "") {
      arr[n] = playerOne ? "X" : "O";
      setPlayerOne(!playerOne);
      console.log(arr);
      setButtons(arr);
    }
    if (checkWin(arr)) {
      console.log("won")
    }
  }

  function checkWin(arr) {
    const a = arr;
    if (
      (a[0] === a[1] && a[1] === a[2] && a[2] === a[0] && a[0] !== "") ||
      (a[3] === a[4] && a[4] === a[5] && a[5] === a[3] && a[3] !== "") ||
      (a[6] === a[7] && a[7] === a[8] && a[8] === a[6] && a[6] !== "") ||

      (a[0] === a[3] && a[3] === a[6] && a[6] === a[0] && a[0] !== "") ||
      (a[1] === a[4] && a[4] === a[7] && a[7] === a[1] && a[1] !== "") ||
      (a[2] === a[5] && a[5] === a[8] && a[8] === a[2] && a[2] !== "") ||

      (a[0] === a[4] && a[4] === a[8] && a[8] === a[0] && a[0] !== "") ||
      (a[2] === a[4] && a[4] === a[6] && a[6] === a[2] && a[2] !== "")
    ) {
      setMessageEnd(playerOne ? "Winner: X" : "Winner: O");
      return true;
    } else if (arr.every(el => el === 0)) {
      setMessageEnd("It's a Draw!")
      return true;
    }
    return false;
  }

  function handleReset() {
    setMessageEnd(false);
    setButtons(["", "", "", "", "", "", "", "", ""]);
    setPlayerOne(true);
  }

  const text = messageEnd ? messageEnd : `Next player: ${playerOne ? "X" : "O"}`

  return (
    <>
      <p>{text}</p>
      <div className="grid">
        {buttons.map((button, i) => {
          return (
            <button id={i} key={button + i} className="square" onClick={handleClick} >
              {buttons[i]}
            </button>
          )
        })}

      </div>
      <button id="reset" onClick={handleReset}>Reset</button>
    </>
  )
}

Link to challenge :

https://www.freecodecamp.org/learn/front-end-development-libraries-v9/lab-tic-tac-toe/build-a-tic-tac-toe-game

Im on Chrome if it can help :slight_smile:

2

Ok, problem came from the key in the map, changing when value change too. It’s good now :slight_smile:

<button id={i} key={button + i} className="square" onClick={handleClick}>
     {buttons[i]}
</button>