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.

  1. 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.)
  2. using vanilla js event handler in html
  3. using vanilla native js event handler while using React
  4. renderSquare is unnecessary
  5. 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;

renderSquare means a function and this function return the square component.