The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Question

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Having a data-filled table, I am looking to implement smooth transitions when adding or deleting an item. This is a ReactJS project utilizing Material-UI.

The desired effect is similar to the one demonstrated in their example. While they use a List component, my implementation involves a table. Here's a snippet of the code:

<TableBody>
    <TransitionGroup component={null} id="ffff">
        {(data?.maintenanceRequests || []).map((form) => (
            <Collapse key={form.id} component={TableRow}>

                <TableCell>{form.building}</TableCell>
                <TableCell>{form.dueDate ? form.dueDate : '-'}</TableCell>
                <TableCell align="right">
                    <IconButton component={Link} to={`request/${form.id}`}>
                        <EditIcon />
                    </IconButton>
                    <IconButton onClick={() => deleteReq({ variables: { deleteMaintenanceRequestId: form.id }, refetchQueries: [{ query: GET_MAINTENANCE_REQUESTS }] })}>
                        <DeleteIcon />
                    </IconButton>
                </TableCell>

            </Collapse>
        ))}
    </TransitionGroup>
</TableBody>

Using this code triggers warnings such as:

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

And

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

I have already specified the components that and should wrap. Upon inspecting the element, I noticed that the TransitionGroup component adds two nested div elements, hence the warnings. The challenge now lies in resolving these issues.

css reactjs html-table material-ui

Answer 1

Answer №1

If you are looking for an alternative to using the mui table in this scenario, here is a potential solution:

import {
  Collapse,
  IconButton,
  TableCell,
  TableRow,
  Table,
  TableContainer,
  Paper,
  Button
} from '@mui/material'
import { useState } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

import DeleteIcon from '@mui/icons-material/Delete'

const data = [
  { id: 1, building: 'A', dueDate: '12/12/12' },
  { id: 2, building: 'b', dueDate: '12/12/12' },
  { id: 3, building: 'c', dueDate: '12/12/12' },
  { id: 4, building: 'd', dueDate: '12/12/12' },
  { id: 5, building: 'e', dueDate: '12/12/12' },
  { id: 6, building: 'f', dueDate: '12/12/12' },
  { id: 7, building: 'g', dueDate: '12/12/12' },
  { id: 8, building: 'h', dueDate: '12/12/12' }
]

const alpha = 'ABCDEFGHIGKLMNOPQRSTUVWXYZ'

const CustomTable = () => {
  // const textFieldClasses: any = textfieldUseStyles()c
  const [ListData, setListData] = useState(data)

  const handleAddData = () => {
    const newData = [
      ...ListData,
      {
        id: ListData.length + 1,
        building: alpha.charAt(Math.floor(Math.random() * alpha.length)),
        dueDate: '12/12/12'
      }
    ]
    setListData(newData)
  }

  const handleRemoveData = (id) => {
    const newData = ListData.filter(item => item.id !== id)
    setListData(newData)
  }

  return (
    <TransitionGroup>
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <TransitionGroup>
            {ListData.map(form => (
              <Collapse key={form.id}>
                <TableRow className="item">
                  <TableCell>{form.building}</TableCell>
                  <TableCell>{form.dueDate ? form.dueDate : '-'}</TableCell>
                  <TableCell align="right">
                    <IconButton onClick={() => handleRemoveData(form.id)}>
                      <DeleteIcon />
                    </IconButton>
                  </TableCell>
                </TableRow>
              </Collapse>
            ))}
          </TransitionGroup>
        </Table>
        <Button sx={{ mt: 2, width: '100%' }} onClick={handleAddData}>
          Add Item
        </Button>
      </TableContainer>
    </TransitionGroup>
  )
}

export default CustomTable

Answer 2

If you are looking for an alternative to using the mui table in this scenario, here is a potential solution:

import {
  Collapse,
  IconButton,
  TableCell,
  TableRow,
  Table,
  TableContainer,
  Paper,
  Button
} from '@mui/material'
import { useState } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'

import DeleteIcon from '@mui/icons-material/Delete'

const data = [
  { id: 1, building: 'A', dueDate: '12/12/12' },
  { id: 2, building: 'b', dueDate: '12/12/12' },
  { id: 3, building: 'c', dueDate: '12/12/12' },
  { id: 4, building: 'd', dueDate: '12/12/12' },
  { id: 5, building: 'e', dueDate: '12/12/12' },
  { id: 6, building: 'f', dueDate: '12/12/12' },
  { id: 7, building: 'g', dueDate: '12/12/12' },
  { id: 8, building: 'h', dueDate: '12/12/12' }
]

const alpha = 'ABCDEFGHIGKLMNOPQRSTUVWXYZ'

const CustomTable = () => {
  // const textFieldClasses: any = textfieldUseStyles()c
  const [ListData, setListData] = useState(data)

  const handleAddData = () => {
    const newData = [
      ...ListData,
      {
        id: ListData.length + 1,
        building: alpha.charAt(Math.floor(Math.random() * alpha.length)),
        dueDate: '12/12/12'
      }
    ]
    setListData(newData)
  }

  const handleRemoveData = (id) => {
    const newData = ListData.filter(item => item.id !== id)
    setListData(newData)
  }

  return (
    <TransitionGroup>
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <TransitionGroup>
            {ListData.map(form => (
              <Collapse key={form.id}>
                <TableRow className="item">
                  <TableCell>{form.building}</TableCell>
                  <TableCell>{form.dueDate ? form.dueDate : '-'}</TableCell>
                  <TableCell align="right">
                    <IconButton onClick={() => handleRemoveData(form.id)}>
                      <DeleteIcon />
                    </IconButton>
                  </TableCell>
                </TableRow>
              </Collapse>
            ))}
          </TransitionGroup>
        </Table>
        <Button sx={{ mt: 2, width: '100%' }} onClick={handleAddData}>
          Add Item
        </Button>
      </TableContainer>
    </TransitionGroup>
  )
}

export default CustomTable

The use of Material-UI collapse animation in a table results in the insertion of div elements, triggering a validateDOMNesting warning

Answer №1

Similar questions

Is there a way to change the default style for a specific tab in CSS?

What is the best way to send props from a child component to its parent in a React

Transferring data between different elements in a React application

Why is React's nested routing failing to render properly?

Having trouble with UseSelector in React Redux?

When an absolute positioned DIV is nested inside a relatively positioned DIV, it disappears when the page is scrolled

Dynamic Bootstrap User Authentication Form

I'm having trouble adding headers to my axios post request. The post route functions correctly in Postman but does not work when using axios. Can anyone

Echo result triggers a color change in the table cell

Using Express JS to Serve React JS Site With Path Exceeding a Simple Subdirectory

Customize tooltip and speed dial styles in React using Material UI

The image is non-adjustable to different screen sizes

Creating a button within a card: tips and tricks

What is the best way to pinpoint a specific Highcharts path element?

I am interested in updating the color of the active item on the navbar

What is preventing me from viewing my cards in flex or grid layout?

Looking to have the image float after reducing the size of the windows in html?

What is the best way to ensure the menu background aligns perfectly with the header in HTML/CSS?

Material UI - Array of Chips

A web page with a full-width header, content constrained to a set width, logo elements displayed with flexbox, and a footer that