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?

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

  1. 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:

    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} rowSpan="2">
                            Something else
                        </TableCell>
                        {daysMaps.map( (day, i) => (
                        <TableCell key={i} align="center" colSpan={3}>
                            {day}
                        </TableCell>
                        ))}
                    </TableRow>
                    <TableRow>
                         {daysMaps.map(() => {
                             {shifts.map( (shift,i) => (
                                <TableCell key={i} align="center">
                                   {shift}
                                </TableCell>
                             ))}
                         })}
                   </TableRow>
                </TableHead>                  
            </Table>
        </TableContainer>
    </div>
</>
);

    I’ve added key attributes in for you. You’ll get an error without those,

    Reply

  2. You somehow mixed up the code and forgot the return statements:

      <TableRow align="center">
    {daysMaps.map(() => {
      return shifts.map(shift => {
        return <TableCell align="center">{shift}</TableCell>;
      });
    })}
  </TableRow>

    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.

    Reply

  3. 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

    <TableHead>
  <TableRow>
    <TableCell align="left" colSpan={1}>
      Something else
    </TableCell>

    <TableCell align="center">
      {daysMaps.map(day => (
      <span style={{textAlign:"center"}}>
        {day}
      </span>
      ))}
    </TableCell>
    <TableCell align="center">
      {daysMaps.map(() => { {shifts.map(shift => {
      <span style={{textAlign:"center"}}>
        {shift}
      </span>
      })} })}
    </TableCell>

  </TableRow>
</TableHead>
    Reply

Leave a Comment