Outline
Outline
Exercise: Flipping Tic Tac Toe
https://stackblitz.com/edit/react-eit529
Objectives
1) The app is currently broken. Fix the code so the Tic Tac Toe board shows up on the screen.
Here's the API for the useReducer hook. You'll need something similar to get started.
//var [state, dispatch] = useReducer(reducer, startingState);
Hints:
- use "React.useReducer", or add useReducer next to the "useState" import on first line
- ensure the variable names are correct in the useReducer hook function call
- ensure other variable names like "currState" are what they should be
2) Make the Flip Values button work. It should reverse all the plays. Any X square should flip to O, and O fields should flip to X.
Hints:
- Add an event handler for the Flip Values button click and have it dispatch the "FLIP_FIELDS" action.
- Add a new case in the reducer for the "FLIP_FIELDS" action
- loop over fields and reverse the values when "o" or "x" is present
- merge the fields into the new state using immutability
- return state