wrap material ui Table inside div

Question

render () {
    const { classes, intl, userFormData } = this.props
    const { open, usersList, isSomeFilterSelected, selected } = this.state
    return (
      <div className={classes.root}>
        <div className={classes.container}>
          <Paper className={classes.table}>
            {selected.length === 0 ? <div
              className={classNames(classes.buttons, isSomeFilterSelected ? classes.filterSelected : classes.filterAreNotSelected)}>
              {isSomeFilterSelected ? <div onClick={this.onClearFilters}>
                <Button className={classes.button}>
                  {intl.formatMessage(messages.clear)}
                  <DeleteIcon className={classes.rightIcon}/>
                </Button>
              </div> : null}
              <UserTableFilterForm
                onSubmit={this.onHandleSubmit}
                open={open}
                handleOpenStateClose={this.onHandleOpenFilters}
                handleOpenStateOpen={this.onHandleCloseFilters}
                switcher={userFormData['switchField'] ? userFormData['switchField'] : false}
              />
            </div> : null}
            {selected.length !== 0 ? <TableToolbar
              numSelected={selected.length}
              handleOnDeleteAction={this.onHandleDeleteSelectedUsers}
            /> : null}
            <Table>
              <TableHead
                onSelectAllClick={this.onSelectAllUsersFromTableForDelete}
                numSelected={selected.length}
                rowCount={usersList.length}
              />
              <TableBody
                {...this.state}
                onHandleSelected={this.onHandleSelected}
                isSelected={this.isSelected}
              />
            </Table>
            <TableFooter
              {...this.state}
              onHandlePageParameter={this.onHandlePageParameter}
              onHandleChangeRowsPerPage={this.onHandleChangeRowsPerPage}
            />
          </Paper>
        </div>
      </div>
    )
  }

Above you can see my code , below you can see the error which occur when I load this page , I want to wrap table inside div , but can't find how to solve it , pls help , and I tried to find in which parent can occur Table and td , but haven't found also

Warning: validateDOMNesting(...): cannot appear as a child of . in td (created by Context.Consumer) in TableCell (created by WithStyles(TableCell)) in WithStyles(TableCell) (created by TablePagination) in TablePagination (created by WithStyles(TablePagination)) in WithStyles(TablePagination) (created by TableFooter) in TableFooter (created by WithStyles(TableFooter)) in WithStyles(TableFooter) (created by InjectIntl(WithStyles(TableFooter))) in InjectIntl(WithStyles(TableFooter)) (created by UsersPage) in div (created by Paper) in Paper (created by WithStyles(Paper)) in WithStyles(Paper) (created by mapProps(WithStyles(Paper))) in mapProps(WithStyles(Paper)) (created by WithStyles(mapProps(WithStyles(Paper)))) in WithStyles(mapProps(WithStyles(Paper))) (created by UsersPage) in div (created by UsersPage) in div (created by UsersPage) in UsersPage (created by Connect(UsersPage)) in Connect(UsersPage) (created by WithStyles(Connect(UsersPage))) in WithStyles(Connect(UsersPage)) (created by InjectIntl(WithStyles(Connect(UsersPage)))) in InjectIntl(WithStyles(Connect(UsersPage))) (created by UniversalComponent) in UniversalComponent (created by Route) in div (created by MainLayout) in div (created by MainLayout) in div (created by MainLayout) in div (created by MainLayout) in MainLayout (created by WithStyles(MainLayout)) in WithStyles(MainLayout) (created by Route) in Route (created by PageRoute) in PageRoute (created by _default) in Switch (created by _default) in _default (created by Application) in IntlProvider (created by Connect(IntlProvider)) in Connect(IntlProvider) (created by Application) in Application (created by Connect(Application)) in Connect(Application) in MuiThemeProviderOld in JssProvider in Router (created by ConnectedRouter) in ConnectedRouter (created by Connect(ConnectedRouter)) in Connect(ConnectedRouter) in Provider

Ryan Cogswell Ryan Cogswell · Accepted Answer · 2019-01-17T16:09:17

Not sure if this is the only issue, but your TableFooter element should be inside the Table.

    <TableFooter
      {...this.state}
      onHandlePageParameter={this.onHandlePageParameter}
      onHandleChangeRowsPerPage={this.onHandleChangeRowsPerPage}
    />
    </Table>

instead of:

    </Table>
    <TableFooter
      {...this.state}
      onHandlePageParameter={this.onHandlePageParameter}
      onHandleChangeRowsPerPage={this.onHandleChangeRowsPerPage}
    />

wrap material ui Table inside div

1 Answers