Water & Earth - Iris & Kal

[iris-lux]

React Tic Tac Toe

Congratulations! You're submitting your assignment. Please reflect on the assignment with these questions.

Reflection

Prompt	Response
How are events / event handlers and useState connected?	useState gives the initial state alongside a function to change the state. useState can let events change the state. When using an event handler, we call for a function to change the state (handling the event).
What are two ways to do "dynamic styling" with React? When should they be used?	Spread and destructuring. Spread is used when you want to split apart a collection, de-structuring is used to peel off individual elements form a collection.
Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content.	Using useState we know the original state of the program, when a square (child component) is clicked on, the event handler is invoked and the state of the program is updated accordingly.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	For time & space its O(1) because squares will always be the same size.
Consider what happens when React processes a state change from setState -- it must re-render all of the components that now have different content because of that change. What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components? Speculate wildly about what the Big-O time complexity of that code might be.	We think the components are set up in a sort of nested hash table or tree? A binary search or something with nodes. Time complexity - logn?

[kaidamasaki]

For TicTacToe we reviewed test results, the checkForWinner function, and onClickCallback function.

Good work implementing a React project using state and callback functions!

[kaidamasaki]

You had test errors because you didn't match the expected format:

Suggested change

	for(let i in squares){
	if (squares[i][0].value === squares[i][1].value && squares[i][1].value === squares[i][2].value && squares[i][0].value !== ''){
	return `Winner is player ${squares[i][0].value}`;
	}
	else if(squares[0][i].value === squares[1][i].value && squares[1][i].value === squares[2][i].value && squares[0][i].value !== ''){
	return `Winner is player ${squares[0][i].value}`;
	};
	}
	if((squares[1][1].value !== '') && ((squares[1][1].value === squares[0][0].value && squares[2][2].value === squares[0][0].value) || (squares[1][1].value === squares[0][2].value && squares[1][1].value === squares[2][0].value))){
	return `Winner is player ${squares[1][1].value}`;
	};
	for(let i in squares){
	if (squares[i][0].value === squares[i][1].value && squares[i][1].value === squares[i][2].value && squares[i][0].value !== ''){
	return `Winner is ${squares[i][0].value}`;
	}
	else if(squares[0][i].value === squares[1][i].value && squares[1][i].value === squares[2][i].value && squares[0][i].value !== ''){
	return `Winner is ${squares[0][i].value}`;
	};
	}
	if((squares[1][1].value !== '') && ((squares[1][1].value === squares[0][0].value && squares[2][2].value === squares[0][0].value) || (squares[1][1].value === squares[0][2].value && squares[1][1].value === squares[2][0].value))){
	return `Winner is ${squares[1][1].value}`;
	};