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

Kyle Shevlin
InstructorKyle Shevlin
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 12 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today