Peter's Submission #6
Conversation
There was a problem hiding this comment.
Hey @PeterTheDeveloper - nice work on this one! I wasn't able to boot the app up locally for some reason (seems like maybe the package.json file was missing from the diff? No worries though - the code looks really good overall. I like the choice to use the context to help hold some of your game state. One thought I had is that you could potentially put even more of the logic onto the context and let your components be a little bit more presentational. It's up to you though - there are definitely some downsides to that approach too! Feel free to respond to any of the comments or on the thread here if you have any questions!
| } | ||
| return null; | ||
| } | ||
| threeInARow() |
There was a problem hiding this comment.
I think you need a return statement here to either return null or the winner.
| <h3>{moves}</h3> | ||
|
|
||
| <div className="row board-row"> | ||
| <Square onClick={() => clickHandler(0)} value={board[0]} /> |
There was a problem hiding this comment.
You can shorten this up a bit by using the chunk method from lodash if you like, or by implementing your own chunk method! https://lodash.com/docs/4.17.15#chunk
{_.chunk(board, 3).map(row => (
<div className="row board-row">{row.map((cell, i) => <Square onClick={() => clickHandler(i)} value={cell} }</div>
))}| @@ -0,0 +1,9 @@ | |||
| import React from 'react' | |||
|
|
|||
| function Square(props) { | |||
There was a problem hiding this comment.
One small note: you can use object destructuring if you like to avoid needing to call props. multiple times on the next line. function Square({click, value})
| setBoard(boardInHistory[turn]); | ||
| } | ||
|
|
||
| function clickHandler(i) { |
There was a problem hiding this comment.
No right or wrong answer here, but I think you could make an argument that this logic could fit nicely on the context. Instead of the context providing setBoard, setHistory, and setTurn, you could just pass this function and let it get called as the callback. The downside if your context becomes less flexible, but the upside is that the component stays shorter.
There was a problem hiding this comment.
One other upside to that approach is that the Square component could pull it's callback directly from the context instead of requiring it as a prop.
No description provided.