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.
In your original nested for loop code, you only had one array instead of an array of arrays. Plus, your outer for loop was not pushing a component. You were trying to build the row divs as if they were strings or something. The inner for loop logic was close but your for loop for dealing with i > 0 was not correct, so there would have been two squares with a key of 4 and two squares with a key of 5 and no squares with a key of 7 or 8. I added console.log statements so you can see what value of j would have been passed to the renderSquare method.
Assuming you could fix the one for loop’s logic, your code would display something if you then pushed ttt to another array to be ultimately returned by the squared method. For example, with a couple of modifications (see comments) to your original code, you could have used the following. Remember, the code below still has a bug due to the first inner for loops logic, but you will at least understand how you could have properly displayed the row.
squared = () => {
const finalArr = []; // array to contain the rows of squares
for (let i = 0; i < 3; i++) {
let ttt = []; // array to contain a set of three squares
if (i > 0) {
for (let j = i + 2; j < i + 5; j++) { // this for loop logic is not correct
console.log(j);
ttt.push(this.renderSquare(j));
}
} else {
for (let j = 0; j < 3; j++) {
console.log(j);
ttt.push(this.renderSquare(j));
}
}
finalArr.push(
<div className="board-row" key={i}>{ttt}</div>
);
}
return finalArr;
}
You attempted to push half a component. It was missing the closing /
If you would have closed it properly (see below), then you would have received an error about the ttt.push() instead. Debugging JSX code is a little trickier. You have to remember when you write html elements they are really like calling a function. It would be kind of like trying to call a function with only a ( and not the closing ).