[Solved]-REACT ERROR <th> cannot appear as a child of <thead>. See (unknown) > thead > th-Reactjs

Just put <TableCell /> in to the <TableRow />

for example

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';


export default function Untitled() {

  const items = GetItems() //get items from some where...

  return (
    <Table>
    <TableHead>
        <TableRow> // <--- I mean this section
            <TableCell> ID </TableCell>
            <TableCell> name </TableCell>
            <TableCell> last name </TableCell>
        </TableRow>
    </TableHead>
    <TableBody>
        {
            items.map((item, key) => (
                <TableRow key={key}> // <--- I mean this section
                    <TableCell> {item.id} </TableCell>
                    <TableCell> {item.name} </TableCell>
                    <TableCell> {item.last_name} </TableCell>
                </TableRow>
            ))
        }
    </TableBody>
</Table>
    );
}

I've had this error come up because of mistakes elsewhere in my list.

For example @Sag1v has <tbody> instead of </tbody> to close the body of his list and I bet that is causing the error.

Mistakenly, I had tbody inside thead

(1)

<thead>
...
  <tbody>
  ...
  </tbody>
</thead>

instead of (2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Changing to (2) solved my problem.

Well th should be nested under a tr not a thead. Docs

<table>
  <thead>
    <tr>
      <th>name</th>
      <th>age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>john</td>
      <td>33</td>
    </tr>
    <tr>
      <td>smith</td>
      <td>22</td>
    </tr>
    <tr>
      <td>jane</td>
      <td>24</td>
    </tr>
  </tbody>
</table>

The only direct children allowed for thead are tr elements, not th.

<table>
  <thead>
    <tr>
      <th />
    </tr>
  </thead>
  ...
</table>