Map Over a 2-Dimensional Array to Create a Game Grid in React with CSS Grid
Our tic-tac-toe UI has to display our grid data. Using CSS Grid to do so is :chefs_kiss:. We'll create Grid and Cell components to handle our data. The Grid component will map our rows and columns and use the CSS Grid layout engine to correctly place them. We'll make our grid generically handle any amount of rows and columns we would throw at it. We'll use a simple trick with the grid-gap property to easily create the crossing lines of a tic-tac-toe game.
Kyle Shevlin: [0:00] Having created an empty grid, we can now display that grid in our game. I'm going to remove this console.log, and I'm going to close the DevTools over here. We're going to use CSS Grid to display our grid.
[0:14] Our grid is going to require two components. I will make shells for them now, function Grid, which will receive grid as a prop. That's the data that we're generating in the game component. I'll also make a Cell component and this will eventually receive a value and display that value.
[0:32] We'll start working on the Grid component itself. Grid receives our grid data and we will create a cell for each datum in the set of data. That might be a bit confusing. It'll make sense quite quickly.
[0:50] We're going to start off by creating a wrapping div for our grid. We're going to set the styles of this. I'm using emotion CSS-in-JS and the css prop to do this.
[1:01] We're going to set this display to 'inline-block' so that it takes up no more width than required. This will allow us to make an inner div that uses CSS Grid and fractional units without taking up the full width of the page. The width of our grid will be determined by the size of the cells themselves.
[1:22] We'll start with the CSS for the grid here. Since we're using CSS Grid, we need to set the display: 'grid' and we're going to set gridTemplateRows equal to the number of rows in our grid. To do this, we can use a template string with the function 'repeat'.
[1:39] We'll pass in the length of our grid as the number of rows. We'll use the one fractional unit as our number. We'll do the same for columns but this time, we'll use the first row of our grid to be the number of columns. We'll also use one fractional unit here.
[1:59] We'll save that really quick. We're going to do a couple extra things with our grid to make the styles exactly what we want. We're going to add a gridGap here, and I'm going to just set the value to two. Then I'm going to add a backgroundColor to the whole grid and I'm going to set it to a dark gray.
[2:15] What this will do is create the crossing lines that you see in a TicTacToeGrid without having to write a bunch of fancy borders depending on position of the cell. Let's add grid to our game component.
[2:29] We see we just have a tiny square at the moment. That's because the only thing we're seeing is the gridGaps. We haven't given it any cells inside of it to take up that space.
[2:39] The next thing I want to do is I'm going to make a generic cell so that when we start to map over a grid, we have something to display. Here, I'm going to return a div. We're going to give it some styles.
[2:53] What we'll do to reveal that cross hash that I was talking about is we'll give this a backgroundColor of white so that each cell is the same color as the background of our app. We'll also give it a width: 100 and a height: 100.
[3:10] Lastly, we'll pass the value in as the child of the cell. You could use children, but I don't want to use composition up here as I now generate the cells of our grid. We're going to take our grid data, and we're going to map over it. If you remember, the items at the top level of our two-dimensional grid array are the rows. That'll be a row.
[3:33] We need to keep track of the rowIdx as this will be important for creating the key prop of our cell. We don't need to wrap our row data with anything. We can immediately map over row. I'm going to move this to another line.
[3:47] This will be our value that we'll pass into cell. We need the colIdx as well. This will return -- I'll make a new line -- our Cell. Our key for this is going to be the x/y coordinate pair. This is sometimes a little confusing the first few times you make a grid. Columns are your x value. We'll pass colIdx here. We'll give a delimiter of a dash.
[4:13] We'll pass in the rowIdx. This will give each cell a unique key. The last thing we need to do is we need to pass in the value as a prop to our cell. I'm going to save that, and you can now see we have the Tic Tac Toe board that we've all grown up seeing.