Use TransitionGroup with Grid

[TrySpace]

Duplicates

• [x] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

I tried to get the below code to work, but wrapping the grid item breaks the layout, because it wraps the children in a div, so I added component={null}, but then the Grid items don't get stretched to the width:

Trying this: <Collapse key={index} component={Grid}> doesn't seem to properly inherit the props from the container Grid element.

Is there any way for this example so the grid doesn't break?

Expected behavior 🤔

 <Box>
    <Grid container spacing={2}>
      <TransitionGroup component={null}>
        {items
          ? map(items, (item, index) => {
              return (
                <Collapse key={index}>
                  <Grid item xs={12} sm={6} md={4} lg={3} xl={2}>
                    <SomeComponent item={item} />
                  </Grid>
                </Collapse>
              )
            })
          : null}
      </TransitionGroup>
    </Grid>
  </Box>

Steps to reproduce 🕹

To reproduce, try the above code

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Windows 10 10.0.18363 Binaries: Node: 14.17.6 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.18362.1533.0) npmPackages: @emotion/react: ^11.7.1 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.59 @mui/icons-material: ^5.2.1 => 5.2.1 @mui/lab: ^5.0.0-alpha.60 => 5.0.0-alpha.60 @mui/material: ^5.2.3 => 5.2.3 @mui/private-theming: 5.2.3 @mui/styled-engine: 5.2.0 @mui/system: 5.2.3 @mui/types: 7.1.0 @mui/utils: 5.2.3 @types/react: ^17.0.0 => 17.0.37 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.1.2 => 4.5.3 ```

[VivekGupta137]

Having same issue

[JohannHospice]

It seems to work great like this :

<Grid container>
  <TransitionGroup component={null}>
    {listOfData.map((data, key) => (
      <Grid
        key={key}
        component={Collapse}
      >
        <SomeComponent data={data} />
      </Grid>
    ))}
  </TransitionGroup>
</Grid>

[TrySpace]

@JohannHospice I don't see the Collapse animation component anywhere, so this won't animate anything I assume?

[MuLoo]

Having some issue when i use TransitionGroup and Collapse in table like

<TableBody>
   <TransitionGroup component={null}>
     {arr.map(() => <Collapse><TableRow /></Collapse>  )} 
   </TransitionGroup>  
</TableBody>

Collapse will insert div into table, so the table structure and styles been destroyed。 anyone see this can try , but is not a good practice

<TransitionGroup component={null}>
     {arr.map(() => <Collapse>
     <Table>
        <TableBody>
            <TableRow />
        </TableBody>
    </Table>
</Collapse>  )} 
   </TransitionGroup> 

[eSilvac]

@MuLoo Did you find a solution for this problem? I'm having the same problem right now. Thank you