Material-UI Warning: validateDOMNesting(...): cannot appear as a descendant of

Question

I'm using Material UI and I get this error when I click on Collapse cmp (Material UI) which is inside a table:

validateDOMNesting(...): <p> cannot appear as a descendant of <p>. **

I saw same topic but with Typography which I didn't use. I have no idea if the problem is the Collapse cmp or the element inside it

Here is the code:

import React from 'react'
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
import IconButton from '@material-ui/core/IconButton';
import Collapse from '@material-ui/core/Collapse';
import Box from '@material-ui/core/Box';
import classes from './post.module.scss'
import Button from '@material-ui/core/Button';

export default function PostRow(props) {
    const { row, delatePost, loadProfile, fromProfile } = props;
    const [open, setOpen] = React.useState(false);
    return (
        <React.Fragment>
            <TableRow onClick={() => setOpen(!open)} style={{ borderBottom: 'unset', cursor: 'pointer' }}>
                <TableCell>
                    עוד
                    <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
                        {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
                    </IconButton>

                </TableCell>
                <TableCell align="right">{row.name}</TableCell>
                <TableCell align="right" component="th" scope="row">
                    {row.businessField}
                </TableCell>
                <TableCell align="right">{row.followers}</TableCell>
            </TableRow>
            <TableRow>

                <TableCell style={{ paddingBottom: 0, paddingTop: 0, }} colSpan={6}>
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        <Box margin={0}>
                            <div className={classes.about}>
                                <h4>קצת על העסק</h4>
                                <p>{row.aboutBusiness}
                                    <h4>דרישות</h4>
                                    <p>{row.requirements}</p>
                                </p>
                                {fromProfile &&
                                
                                    <Button variant="contained" color="secondary" style={{marginBottom: '15px'}} onClick={async () => {
                                        await delatePost(row._id)
                                        loadProfile()
                                    }}>מחק פוסט</Button>
                                }
                            </div>
                        </Box>
                    </Collapse>
                </TableCell>
            </TableRow>
        </React.Fragment>
    );
}

Answer 1

thanks guys i will read the articles :) meanwhile I just removed the P element and its working great.