Why typescript (tsx) doesn't return html when map is using twice?

Question

I've made array with chunks using this method:

  const newArray: Array<Array<any>> = [];

  for (let i = 0; i < codeData?.length; i++) {
    if (i % 3 === 1) {
      newArray.push([codeData[i - 1], codeData[i], codeData[i + 1]].filter(el => el !== undefined));
    }

  }

But when I try to map it twice It doesn't return HTML , but when I set the value of the last map to the console it returns what I need:

                 {newArray
                ?.slice(
                  page * rowsPerPage,
                  page * rowsPerPage + rowsPerPage
                )
                ?.map((arr: any) => {
                  arr
                    .filter((element) => element !== undefined)
                    .map((row: any) => {
                      return (
                        <TableRow
                          role="checkbox"
                          key={row.id}
                          className={classes.row}
                        >
                          {row.id}
                        </TableRow>
                      );
                    });
                })}

I guess it happened because typescript, as for as I know, has this dynamic - [] but when I'm using map twice it has - [[]] .

Anybody can help me?

Answer 1

map return an array and if you nest them you will get nested arrays too.

If you change the first map to flatMap it will falten the results in to a single array.