Can not render Table correctly in React

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">
                            <TableCell align="left" colSpan={1}>
                                Something else
                            <TableRow align="center">
                                { => (
                                <TableCell align="center" colSpan={90}>
                            <TableRow align="center">
                                { => {
                                    { => {
                                        <TableCell align="center">


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