Estoy tratando de hacer un simple juego de tres en raya en React.js:
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;
como puede ver, tengo tres estados: X , O , EMPTY para el tablero, representados por 1, -1 y 0 respectivamente.
pero cuando intento acceder al objeto SYMBOLS para asignar el número al símbolo (al devolver el valor de Square ), el botón está vacío.
¿Qué pasa aquí?
Como mencionó @Andy Ray, el problema proviene del hecho de que está utilizando SÍMBOLOS [0], SÍMBOLOS [-1] y SÍMBOLOS [1] mientras que sus claves de objeto SÍMBOLOS son X, O y VACÍO.
La solución es redefinir SÍMBOLOS:
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'
}