0

I am trying to create 40 cells with react , each should have a different title. For example a0 ...a9, b0 ..b9 etc. This is my code

const mapItems = () => {
    let playerId = ["a", "b", "c", "d"];
    let cellId;
    let l, j;
    for (j = 0; j < 4; j++) {
        for (l = 0; l < 10; l++) {
            cellId = playerId[j].concat(l);
            return (
                    <Cell title={cellId} className={"column"}>
                        {returnItemsForCell(cellId)}
                    </Cell>
            )
        }
    }

}

For some reason I get an error that a variable is not initialized , and only one in nested For loop.
Any ideas on how to do it right? Thanks in advance

Vlad Halyts
  • 13
  • 2
  • 1
    Your nested loop looks correct may be your editor showing it wrongly, but you will get only 4 results in this code. 40 items will not be there on the list! because you are returning instantly on second loop – sojin Sep 16 '21 at 10:32
  • You can use snippets for such questions – Roman Pokrovskij Sep 16 '21 at 12:01

1 Answers1

-1

If someone ever has the same problem , this is the solution.

const mapItems = () => {
    let playerId = ["a", "b", "c", "d"];
    let cellId;
    let cellsList = [];
    for (let j = 0; j < 4; j++) {
        for (let l = 0; l < 10; l++) {
            cellId = playerId[j].concat(l);

            cellsList.push(
                <Cell title={cellId} className={"column"}>
                    {returnItemsForCell(cellId)}
                </Cell>
            )
        }
    }
    return cellsList;

The return just jumped out of the loop.

Vlad Halyts
  • 13
  • 2