In this example, what does mean renderSquare ? What does it makes ?
It creates a single Square component. In this case, it is an empty button element with class name ‘square’.
This demo isn’t really good and I would avoid it.
Maybe if you pls will show good example ?
I don’t have example that directly addresses what you want; but I can point out problems in demo.
- demo is incomplete and presents no particular direction. (He declared bunch of I’ll do this and that but those should go in design draft not in the code.)
- using vanilla js event handler in html
- using vanilla native js event handler while using React
- renderSquare is unnecessary
- hard coded rendering of Square component doesn’t get you far
I have a working version of Tic-Tac-Toe written in React but it does more than just rendering the board. Thus, it won’t serve as a good example in demonstrating how to render a grid board.
1 Like
renderSquare in the example of react is a function written to include the Square component. Since it needs to create the same square 9 times.
When I see a class like className="square" i will think the css code associated with it will make the element’s both width and height same value as:
.square {
height: 34px;
width: 34px;
}
