I just completed the tic-tac-toe tutorial on the official website, and attempted the first challenge/improvement as an exercise. I tried the following two versions of code and to me the logic seems to be the same but the first piece of code return a an incorrect result, whereas the second piece works perfectly fine. Can sombody help me understand why the first piece of code does not work correctly? what is worng with the first piece of code?
I tried the following two code, the one with works is commented in the below code.
code that does not work;
export default function Game() {
//...
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = "Go to move " + move;
} else {
description = "Go to game start";
}
** //code for the challenge that does not work
let bullet;
if (move === currentMove) {
bullet = <li key={move}>You are at move # {move} </li>;
} else {
<li key={move}>
bullet = <button onClick={() => jumpTo(move)}>{description}</button>
</li>;
}
return bullet;**
** //code for the callange that works
/* return move === currentMove ? (
<li>You are at move {move}</li>
) : (
<li key={move}>
<button onClick={() => jumpTo(move)}>{description}</button>
</li>
); */
});**
//...
}
panther is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.