Can not render Table correctly in React

Question

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?

Gh05d · Accepted Answer · 2021-02-15 15:54:39Z

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.

answered Feb 15, 2021 at 15:54

Gh05d

9,06211 gold badges42 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sundowatch Over a year ago

Thank you, you saved my 10 hours. Just to be correct in your codepen: My rowSpan was also wrong, removed 90 and made it 3 to fetch the table. But one more question: Why should I use return statement?

Gh05d Over a year ago

Because if you don't return anything from the function, then nothing is rendered. The way you did it, the array that map creates looks something like this: [ null, null, null ]

John C · Accepted Answer · 2021-02-15 15:55:01Z

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,

Chirume · Accepted Answer · 2021-02-15 15:57:00Z

0

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>

answered Feb 15, 2021 at 15:57

Chirume

592 silver badges8 bronze badges

Collectives™ on Stack Overflow

Can not render Table correctly in React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related