Create a 2-Dimensional Grid for our Tic-Tac-Toe Game

Map Over a 2-Dimensional Array to Create a Game Grid in React with CSS Grid

Convert a 3x3 Tic-Tac-Toe Grid Interactive by Adding Buttons in React

Handle User Input by Adding State to the Tic-Tac-Toe Grid with React useReducer

Reset React State with a Button and Function in our Tic-Tac-Toe Game

Check for Winning Conditions in React useReducer for Tic-Tac-Toe

Prevent Impossible States and Check for Draw Conditions with Guard Statements in React

Manage Complex Tic Tac Toe Game State in React

Tic-tac-toe, like many grid-based games, relies upon a 2-dimensional array data structure to hold the state of our `grid`.

A `grid` is a matrix. The outer array contains all the `rows`, and each row is an array of `columns`. Often each column value is referred to as a `cell`. In tic-tac-toe, we create a 3x3 grid of `null` values that will be replaced with `X`s and `O`s as the user interacts with the game.

Kyle Shevlin: [0:00] The first step in making tic-tac-toe in React is to create a Game component that can hold the state of our game and all the other state values that we might need. For right now, I'll just return a div that has the word Game in it and add it to our app component. We can see that it renders in the UI.

[0:18] The next thing that we need is we need a grid. In tic-tac-toe, our grid is actually pretty simple. A grid is an array, and that array contains each row, and each row is also an array. This becomes a two-dimensional array.

[0:34] The starting grid is three values of null and we have three rows. However, I prefer to not have a hard-coded grid like this and I prefer to use a function to generate these values. To do that, we'll create a generateGrid function. This function will take a number of rows, a number of columns, and a mapper function.

[0:59] This function works by returning an array generated from the number of rows. We need to fill this because this array here is an empty array. It's an array full of empties for that many numbers. They're not even undefined yet. Fill now makes it undefined because we didn't pass it a value. We're going to map over that.

[1:18] If you remember, we have those nested arrays, so we're also going to here return an array. This time we'll use our columns to make that many items in the array. We'll fill those and we'll cal map and we'll use the mapper function that we passed in.

[1:38] To make a specific one for tic-tac-toe, we can call it newTicTacToeGrid and that's a function. We'll return the values from generateGrid. We'll have three rows, three columns and our mapping function will simply return null. Save that.

[1:56] Now we can add grid into our Game component as newTicTacToeGrid. We'll console.log(grid) for right now and see what values it generates. We open up the console and we look down here. We can see that we have three nested arrays in our top array and each of them has three values of null. We're at a great starting point.

Course

Manage Complex Tic Tac Toe Game State in React

Create a 2-Dimensional Grid for our Tic-Tac-Toe Game

Share this video with your friends