React js : My state is not changing after onClick

Question

when I onClick, my state: changeSybmol is not changing to true but remains false.

In summary I just want my state to update to false if it is true or vice versa.

import React, { useState } from "react";
import "./Box.css";

function Box(props) {
  const [symbol, setSymbol] = useState("");
  const [changeSymbol, setChangeSymbol] = useState(false);

  function handleClick() {
    if (symbol === "") {
      if (!changeSymbol) {
        setChangeSymbol(true);
        setSymbol("X");
        console.log(changeSymbol);
      } else {
        setSymbol("O");
        setChangeSymbol(false);
      }
    }
  }

  return (
    <div key={props.key} onClick={handleClick} className="box">
      {symbol}
    </div>
  );
}
export default Box;

Answer 1

Remove the first if statement and it works.

import React, { useState } from "react";

function Box(props) {
  const [symbol, setSymbol] = useState("");
  const [changeSymbol, setChangeSymbol] = useState(false);

  function handleClick() {
      if (!changeSymbol) {
        setChangeSymbol(true);
        setSymbol("X");
        console.log(changeSymbol);
      } else {
        setSymbol("O");
        setChangeSymbol(false);
      }
    
  }

  return (
    <div key={props.key} onClick={handleClick} className="box">
      {symbol}
    </div>
  );
}
export default Box;

Answer 2

Why are you using following piece of code?

if (symbol === "") {}

This is not allowing your code to execute futher once the symbol is set. Remove this & your code will run fine.