Christabel-Water-Maha-Earth

[Maha-ElMais]

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?	The event listener listens for the event once the trigger happens the event handler gets passed data to change the state of the object to updated state

What are two ways to do "dynamic styling" with React? When should they be used? | Assign className to a component state.

1. If the square has a value of X we can give it a yellow color and if it has a value of O we can give it a green color.
2. Once a winner is announce we could change the background of the header.

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. | Event listener watches for input from the user like a mouse click which then triggers the event handler to update the state of the object. Once the state of the object changes the virtual DOM re-renders that component.

CS Fundamentals Questions

Question	Answer
What do you think is the BigO complexity of the method you use to compute a winner?	The tic tac toe board only runs 12 times therefore the bigO complexity for the method to compute a winner is O(1).

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 don't understand what this is asking

[beccaelenzil]

Nice work creating an algorithm with a 2D array.

[beccaelenzil]

Note the following warning. You should add a key prop to your Square key = {square.id:

  Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
       at div
       at Board (/app/src/components/Board.js:19:18)
       ```