Scissors - Hena#49
Conversation
… are passing but symbols are rendering...
…nd completed reset button feature.
beccaelenzil
left a comment
beccaelenzil
left a comment
There was a problem hiding this comment.
Good work on this project involving state and event handling with nested components. You have met the learning goals around Handling user events, Updating the UI, and Updating the state of the game. There was one small bug in your winner functionality that I have pointed out. Please let me know if you have any questions.
| <h1>React Tic Tac Toe</h1> | ||
| <h2>The winner is ... -- Fill in for wave 3 </h2> | ||
| <button>Reset Game</button> | ||
| <h2>The winner is ...{winner}</h2> |
There was a problem hiding this comment.
The bug is here! The test is looking for the specific text Winner is x and it gets The winner is ... x.
| }) | ||
|
|
||
| // a bug exists here somewhere or elsewhere | ||
| if (entireBoard[0] === entireBoard[1] && entireBoard[0] === entireBoard[2]){ |
There was a problem hiding this comment.
Flattening the array and using the flatten array to check for winners certainly works. Considering adding comments to make it clear where you are checking for rows, columns, and diagonals. It looks like you missed columns. Consider also using an algorithm based on the squares 2D array so that you don't have to do the extra work of flattening.
|
|
||
|
|
||
| const markBoard = (id) => { | ||
| squares.forEach((row)=>{ |
There was a problem hiding this comment.
When using React useState hook, we shouldn't directly modify squares. Instead, we can make a copy of squares. One option for this which makes a copy of the outer array is using the spread operator const newSquares = [...squares]. Then we assign our new value to our newSquares and call setSquares(newSquares). This is because of how the useState hook works -- calling setSquares triggers the re-render. In this code, it ends up working because we also call setPlayer which triggers a re-render.
| if (square.id === id && square.value === ''){ | ||
| if (player === PLAYER_1) { | ||
| setPlayer(PLAYER_2); | ||
| square.value = 'x' |
There was a problem hiding this comment.
Consider setting the value to the value of PLAYER_2 to help avoid introducing bugs.
| square.value = 'x' | |
| square.value = PLAYER_2 |
2 participants
No description provided.