I’m trying to make a table with Material UI in React like that:
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:
- The shifts(morning, noon, night) doesn’t appear on the page
- 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?
I suspect you can’t put TableRow inside a TableRow tag.
You’ll need to use rowpspan somewhere. This is a guess, but perhaps like this:
I’ve added key attributes in for you. You’ll get an error without those,
You somehow mixed up the code and forgot the return statements:
Alternatively, exchange the curly braces with round ones, then you can omit the return statement. I made a small codepen for you.
The warning seems to be related to the way material-ui renders the table.
this error means you cannot put a
<tr>
tag as a child of<tr>
nor<td>
as a child of<td>
change your code to this