usage of react state a key to render a value

yoyobara 0
Viewed 21

I'm trying to make a simple tic tac toe game in react:

 28 import './App.css';
 27 import { useState } from "react"
 26 
 25 const X = 1;
 24 const O = -1;
 23 const EMPTY = 0;
 22 
 21 const SYMBOLS = {X: "X", O: "O", EMPTY: "E"};
 20 
 19 var Square = ({idx, click}) => 
 18 {
 17     let [val, setVal] = useState(EMPTY);
 16 
 15     return (
 14         <button onClick={() => {click(setVal, idx);}}>{SYMBOLS[val]}</button>
 13     )
 12 }
 11 
 10 var App = () =>
  9 {
  8     let [turn, setTurn] = useState(X);
  7     let [state, setState] = useState(new Array(9).fill(EMPTY));
  6     let squares = new Array(9);
  5 
  4     let click = (setValFunc, idx) => 
  3     {
  2         setTurn(-turn);
  1         setValFunc(turn);
29          setState((prev) => (prev.map((s, i) => i === idx ? turn : s ))) 
  1     }
  2 
  3     for (let i = 0 ; i < 9 ; i++)
  4     {   
  5         squares[i] = (<Square click={click} idx={i}/>);
  6     }
  7 
  8     return (
  9         <div>
 10             {squares}
 11         </div>
 12     )
 13 }
 14 
 15 export default App;

as you can see, I have three states: X, O, EMPTY for the board, represented by 1, -1, and 0 respectively.

but when I'm trying to access the SYMBOLS object to map number to symbol (when returning value from Square), the button is just empty.

what's wrong here?

frontend jsx reactjs javascript
1 Answers

As @Andy Ray mentioned, the issue comes from the fact that you are using SYMBOLS[0], SYMBOLS[-1] and SYMBOLS[1] while your SYMBOLS object keys are X, O and EMPTY.

The solution is to redefine SYMBOLS:

const SYMBOLS = {
  [X]: 'X', // note the [X] notation that tells that the key should be the value of the variable X that's to say 1. 
  [O]: 'O',
  [EMPTY]: 'E'
}
user32523270
Related