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">
                    <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