Material UI, Warning <td> cannot appear as a child of <div>

Question

I'm using React, typescript and Material UI. I've created a pretty common "Create user form" with basic inputs for username, name, email, ect. Added two buttons, "Edit" and "Delete." Everything seems to function properly, however, I cannot get this error message resolved.

  Warning: validateDOMNesting(...): <td> cannot appear as a child of <div>.

Here's the table from a react component:

            <TableContainer className={classes.scroll} component={Paper}>
                <Table stickyHeader aria-label="table">
                    <TableHead>
                        <TableRow>
                            <TableCell>Username</TableCell>
                            <TableCell align="right">First name</TableCell>
                            <TableCell align="right">Last name</TableCell>
                            <TableCell align="right">Email</TableCell>
                            <TableCell align="right">Connect_username</TableCell>
                            <TableCell align="right">Role</TableCell>
                            <TableCell align="left">Edit</TableCell>
                            <TableCell align="left">Delete</TableCell>
                        </TableRow>
                    </TableHead>

                    <TableBody>
                    {(rowsPerPage > 0
                        ? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                        : props?.items
                    ).map(item => (
                            <TableRow key={item.user_id}>
                                <TableCell component="th">{item.username}</TableCell>
                                <TableCell align="right">{item.first_name}</TableCell>
                                <TableCell align="right">{item.last_name}</TableCell>
                                <TableCell align="right">{item.email}</TableCell>
                                <TableCell align="right">{item.connect_username}</TableCell>
                                <TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
                                <TableCell>
                                    <Button onClick={() => props.handleEdit(item)}>Edit</Button>
                                </TableCell>
                                <TableCell>
                                    <Button onClick={() => props.handleConfirmDelete(item.user_id)}>Delete</Button>
                                </TableCell>
                            </TableRow>
                    ))}
                    </TableBody>
                        <TablePagination
                            rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
                            count={props.items.length}
                            rowsPerPage={rowsPerPage}
                            page={page}
                            onPageChange={handleChangePage}
                            onRowsPerPageChange={handleChangeRowsPerPage}
                        />
                </Table>
            </TableContainer>

Answer 1

component={Paper} is likely causing this. Can you try removing it? If you want the table to appear on a Paper component, then try nesting TableContainer under Paper.

Answer 2

put TablePagination in the TableBody tag and wrap it in TableRow.

Had a similar issue and this fixed it.

Like this:

<TableBody>
    {(rowsPerPage > 0
        ? props?.items.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            : props?.items)
            .map(item => (
                <TableRow key={item.user_id}>
                   <TableCell component="th">{item.username}</TableCell>
                   <TableCell align="right">{item.first_name}</TableCell>
                   <TableCell align="right">{item.last_name}</TableCell>
                   <TableCell align="right">{item.email}</TableCell>
                   <TableCell align="right">{item.connect_username}</TableCell>
                   <TableCell align="right">{item.role?.map(r=>r.role).join(",")}</TableCell>
                   <TableCell>
                       <Button onClick={() => props.handleEdit(item)}>
                           Edit
                       </Button>
                   </TableCell>
                   <TableCell>
                        <Button onClick={() => props.handleConfirmDelete(item.user_id)}>
                           Delete
                        </Button>
                   </TableCell>
                </TableRow>
                <TableRow>
 <TablePagination
                            rowsPerPageOptions={[10, 25, { label: 'All', value: -1 }]}
                            count={props.items.length}
                            rowsPerPage={rowsPerPage}
                            page={page}
                            onPageChange={handleChangePage}
                            onRowsPerPageChange={handleChangeRowsPerPage}
                        />
                </TableRow>
              ))}
      
</TableBody>