Can not render Table correctly in React Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Can not render Table correctly in React without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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?

Answer

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.

We are here to answer your question about Can not render Table correctly in React - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji