Convert a 3x3 Tic-Tac-Toe Grid Interactive by Adding Buttons in React
A game a user can't interact with is hardly a game at all. We'll go through the process of turning our Cell components into accessible buttons and moving the click handling function up to our Game component where our state will eventually be handled.
Kyle Shevlin: [0:00] We need to make the cells of our Tic-Tac-Toeboard interactive. The way we're going to do that is by adding a button to each cell. Inside the Cell component, I will add a button. Always remember to make your buttons of type = "button" because by default, they are type submit, and we'll move the value inside of this.
[0:17] Now our buttons add two things. Right now, they only take up a very small portion of ours cells. Let's fix that with styles. We'll have the width take up 100% of the available width, and we'll have the height take up 100% of the available height. This works because we've defined heights on our parent. We can see they take up the full amount.
[0:40] We now need to add an onClick event handler to our button. I will start by simply writing a no-op here and no-op is a function that doesn't do any operations. Hence, no-op. We can see our buttons click around but this is not where we're going to need this function to really be. We're going to actually need to pass it into Cell from higher up in our component hierarchy. Let's do that.
[1:05] Let's add the prop of onClick, and we will pass this in as a prop. We'll work our way up the component hierarchy. Grid is where we call cells, so we need to pass an onClick here. Our no-op can be moved up to here. This is also not really where we need this.
[1:24] We need a function defined where we're going to end up keeping the state of our game. Truthfully, we need our handleClick function all the way up here in Game.
[1:35] Let's start with a simple no-op function assigned to handleClick. We'll pass that down through our grid, and we'll receive that as our prop here. This is just basic lifting of state and state updaters in React. This is a very important pattern to get very comfortable with.
[1:53] Now, our handleClick is passed from where our state is going to be and where we're going to change it. Let's make some anticipatory changes to handleClick that will mure the changes we need once we make grid state full.
[2:08] HandleClick is going to receive the x and y coordinates of our cell. It'll eventually update the state of the grid with those coordinates. For right now, let's just log out those values to ensure that they are correct. We'll take x and y and make an object out of them.
[2:27] We need to give those x and y values somehow to handleClick. Down here, we're calling onClick. What we can do is we have those x and y values right here. X is the column. Y is the row. We're going to take our function here, and we're going to make an anonymous function.
[2:46] We'll call handleClick inside of this passing in the colIdx as the first argument and the rowIdx as the second argument. Now, we can open up our console. As we click around, we can see our coordinates update, and our buttons are interactive.