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

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?

4 thoughts on “Why typescript (tsx) doesn't return html when map is using twice?”

  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.

    Reply

Leave a Comment