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

Encountering an issue: The type '{ children: Element; }' does not share any properties with type 'IntrinsicAttributes & CookieConsentProviderProps'

margin-top: automatic adjustment, with a minimum of 50 pixels

Utilize ng-bootstrap in an Angular CLI project by integrating it with npm commands

When the children within a CSS container are floated, set the height of the container to

What is the best approach for addressing null values within my sorting function?

mui table pagination behaving unexpectedly

What is the best location to place Sentry's setUser function in a Next.js application?

Java - openpdf - Splitting words using hyphens

Exploring the potential of Material UI's "sx" prop in combination with computed values

Establish a default route within a Node Express application to handle multiple generic URLs (url/index, url/index2, url/index3, and

Ways to prevent the jQuery simple slider from transitioning slides while it is in an invisible state

The useEffect hook in Next.js does not trigger a re-render when the route changes

What is the best way to insert images into a div in Ionic framework?

Enhance the visual appeal of your checkboxes in React Fluent UI by customizing the color of the checked mark and

Encountering an error in React.js: "Unable to access property 'bind' as it is undefined."

The menu was intended to be hidden when the mouse is moved away, but it actually hides

Is it the correct method to query names within JavaScript arrays?

What is the best way to modify a date and time within an <td><input> element using jQuery?

Encountering obstacles as a novice trying to master CSS styling techniques

What are some tactics for avoiding movement in the presence of a border setting?