Asya Spruciiiee

[asya0107]

IM FINALLY DONE(PARITALLY)

[audreyandoy]

Good work Asya! Your logic to mark a square works. We're just missing the logic to check for winner which is just one more function.

I have added comments on ways to refactor your project as it currently is.

Let me know if you'd like to work on the rest of the project together!

Grade: 🟡 Yellow

[audreyandoy]

I assume jest was removed from VS Code because it was running tests with every change right?

We actually turn off auto run by adding the key-value pair to our settings.json in VS Code:

"jest.autoRun": "off"

[audreyandoy]

When pushing code to be reviewed, we should eliminate any print statements or console logs

Suggested change

console.log('Is this thing working');

[audreyandoy]

Great job in making a copy of the squares data! Here's a reminder on why we need to make the copy:

To trigger the update stage for this component, React needs to notice a change in state data. We could mutate state directly, however, this doesn't scale well and doesn't follow React best practices.

Instead, we should pass in a copy of our state data to the setState function setSquares() which will have React compare the object references between the copy and the old state data. If the object references are different, React will then trigger the update stage.

[audreyandoy]

Suggested change

console.log(newSquares);

[audreyandoy]

We also want to make sure we mark squares that haven't been marked yet. We can do so by checking if the value of that square is empty.

Suggested change

	for (let row = 0; row < newSquares.length; row++) {
	for (let columns = 0; columns < newSquares.length; columns++) {
	if (newSquares[row][columns].id === squareId) {
	newSquares[row][columns].value = 'X';
	}
	}
	}
	for (let row = 0; row < newSquares.length; row++) {
	for (let columns = 0; columns < newSquares.length; columns++) {
	if (newSquares[row][columns].id === squareId && newSquares[row][columns].value === '') {
	newSquares[row][columns].value = 'X';
	}
	}
	}

[audreyandoy]

Love the pink css additions!

[audreyandoy]

We can use object destructuring to reference the props data by their key name instead of using dot notation:

const Square = ( {value, id, onClickCallback, key} ) => { 
    return <button className='square' onClick={() => onClickCallback(id)}>{value}</button>;
};
}

Also, good work in using an anonymous callback function for the button's onClick.