React 和 JSX：在 HTML 表中嵌套 Object.values

Question

I have two objects that I'm converting to arrays via Object.values().map . I have a Material-UI table and I want to iterate the arrays and display table data from the arrays.

The two arrays are players and stats . I want to access data from players in the first couple of columns in the table, access data from stats in the next couple of columns, and then again access data from players in the last couple of columns in the form. In other words, stats is sandwiched between players in the table columns.

Here is what I tried:

                    {Object.values(player).map((player, key) => (
                        <TableRow>
                            <TableCell align="left" className={classes.tableContent}>{player[0].primaryNumber}</TableCell>
                            <TableCell align="left" component="th" scope="row"  className={classes.tableContent}>
                                {player[0].fullName}
                            </TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].primaryPosition.name}</TableCell>

                            // Getting an error because this .map is nested inside the player .map
                            {Object.values(stat).map((stat, key) => (
                                <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.points}</TableCell>
                                <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.goals}</TableCell>
                                <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.assists}</TableCell>
                            ))}
                            <TableCell align="left" className={classes.tableContent}>{player[0].currentAge}</TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].height}</TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].weight}</TableCell>
                            <TableCell align="left" className={classes.tableContent}>{player[0].nationality}</TableCell>
                        </TableRow>
                    ))}

How can I successfully nest the inner Object.values(stat).map inside the outer Object.values(players).map ? Is there a cleaner way to do this?

Answer 1

You have to do what is stated in the error. Try this;

{Object.values(stat).map((stat, key) => (
                                <>
                                  <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.points}</TableCell>
                                  <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.goals}</TableCell>
                                  <TableCell align="left" className={classes.tableContent}>{stat[0].splits[0].stat.assists}</TableCell>
                                </>
                               ))}