Generating components in React

What is “properer” way?
I’ve got this code which should generate 3x3 “grid” but it doesn’t:

squared = () => {
		
		let ttt = [];
		
		for(let i=0;i<3;i++){
			ttt.push(<div className="board-row" key={i}>);

				if(i>0){
					for(let j=(i+2);j<(i+5);j++){
						ttt.push(this.renderSquare(j));
					}
				}
				else{
					for(let j=0;j<3;j++){
						ttt.push(this.renderSquare(j));
					}
				}

			ttt.push(</div>);
		}
		return ttt;
	}

and by calling in return statement like this:

return (
      <div>
		{this.squared}
      </div>
    );

Instead it shows me

.

Correct code that i got, that doesn’t generate programatically is:

    const row1=<div className="board-row" key={1}>{this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}</div>;
	const row2=<div className="board-row" key={2}>{this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}</div>;
	const row3=<div className="board-row" key={3}>{this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}</div>;
	const rows=[row1,row2,row3];

Which i call like this:

return (
      <div>
		{rows}
      </div>
    );

Second one works, first one shows an error on for loop, why?

Here it is. I was doing this in loops because one of the subtasks is to do without hardcoding squares. It’s tutorial from official React documentation page.

Using nested for loops, you could do something like the following.

  squared = () => {
    const rows = [];
    for (let i = 0; i < 3; i++) {
      const cols = [];
      for (let j = 0; j < 3; j++) {
        cols.push(this.renderSquare(i * 3 + j));
      }
      rows.push(
        <div className="board-row" key={i}>{cols}</div>
      );
    }
    return rows;
  };

It would be more readable using map instead.

  squared = (arr = [0, 1, 2]) => arr.map(row => (
    <div className="board-row" key={row}>
      {arr.map(col => this.renderSquare(row * 3 + col))}
    </div>
  ))    

Thank you. Care to explain why was error in for loop?

Well that was just the thing. I couldn’t progress 'cause that error, thus couldn’t check if rest of logic after

is valid.