Can not render Table correctly in React

by

I’m trying to make a table with Material UI in React like that:
enter image description here

Here is my code:

return (
    <>
        <div className="main-wrapper">
            <TableContainer component={Paper}>
                <Table style={{ minWidth: '650px' }} aria-label="caption table">
                    <caption>Test</caption>
                    <TableHead>
                        <TableRow>
                            <TableCell align="left" colSpan={1}>
                                Something else
                            </TableCell>
                            
                            <TableRow align="center">
                                {daysMaps.map(day => (
                                <TableCell align="center" colSpan={90}>
                                    {day}
                                </TableCell>
                                ))}
                            </TableRow>
                            <TableRow align="center">
                                {daysMaps.map(() => {
                                    {shifts.map(shift => {
                                        <TableCell align="center">
                                            {shift}
                                        </TableCell>
                                    })}
                                })}
                            </TableRow>

                        </TableRow>
                    </TableHead>
                    
                </Table>
            </TableContainer>
        </div>
    </>
);

I just write the Table Head codes here.

These are the problems:

  1. The shifts(morning, noon, night) doesn’t appear on the page
  2. A warning is shown on the console: Warning: validateDOMNesting(...): <tr> cannot appear as a child of <tr>.

How can I fix this problem and make a correct table?

47 thoughts on “Can not render Table correctly in React”

Leave a Comment