REACT ERROR cannot appear as a child of . See (unknown) > thead > th

Question

I am working on a react - rails app and I keep getting this error in my console:

```
Warning: validateDOMNesting(...): <th> cannot appear as a child of <thead>. 
See (unknown) > thead > th.

I'm not sure why this isn't working..I want to use header (thead) for a table and it worked for someone else. I would put tbody but I need that for the actual body of the table.

here is my code for this table:

```  
     React.DOM.table
        className: 'table table-bordered'
        React.DOM.thead null,
          React.DOM.th null, 'Description'
          React.DOM.th null, 'Actions'
        React.DOM.tbody null,
          for post in @state.posts
            React.createElement Post, key: post.id, post: post, 
            handleDeletePost: @deletePost

**EDIT I have tried adding the tr tag under thead and that causes an extra added error. this is what I changed my code to:

```
   React.DOM.table
      className: 'table table-bordered'
      React.DOM.thead null
        React.DOM.tr null
          React.DOM.th null, 'Description'
          React.DOM.th null, 'Actions'
        React.DOM.tbody null,
          for post in @state.posts
            React.createElement Post, key: post.id, post: post, 
            handleDeletePost: @deletePost

and the next error i get is: Warning: validateDOMNesting(...): tr cannot appear as a child of table. See (unknown) > table > tr. Add a to your code to match the DOM tree generated by the browser.

I'm new to react and not familiar with coffeescript so I'm wondering if it has to do with the spacing or something. Tested out different spacing and that didn't help. I took out the thead all together and that caused my app to break so..not sure what's the problem

It should be `thead > tr > th` – zerkms May 13 '17 at 22:52 — zerkms, May 13 '17 at 22:52
I had typed `thread` instead of `thead` – ArtiomLK May 27 '18 at 17:48 — ArtiomLK, May 27 '18 at 17:48

Bertrand Marron · Answer 1 · 2017-05-13T23:02:02.727

174

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

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

edited May 13 '17 at 23:02

answered May 13 '17 at 22:54

Bertrand Marron

21,501
8
58
94

30

I would've never expected React to teach me something about HTML! – Matt Fletcher Feb 26 '18 at 08:19

Sagiv b.g · Answer 2 · 2018-11-21T20:20:27.173

92

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>

edited Nov 21 '18 at 20:20

answered May 13 '17 at 22:57

Sagiv b.g

30,379
9
68
99

1

I've tried adding tr to my code under thead but it gives me an extra error. – DianaBG May 13 '17 at 23:00
```React.DOM.table className: 'table table-bordered' React.DOM.thead null React.DOM.tr null React.DOM.th null, 'Description' React.DOM.th null, 'Actions' React.DOM.tbody null, for post in @state.posts React.createElement Post, key: post.id, post: post, handleDeletePost: @deletePost – DianaBG May 13 '17 at 23:01
i still then have my original error as well as "tr cannot appear as a child of table" and – DianaBG May 13 '17 at 23:02

leocrimson · Answer 3 · 2019-03-15T17:31:07.383

4

Mistakenly, I had tbody inside thead

(1)

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

instead of (2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Changing to (2) solved my problem.

edited Mar 15 '19 at 17:31

answered Mar 15 '19 at 16:56

leocrimson

702
1
11
25

score 2 · Answer 4 · answered Nov 16 '17 at 06:05

2

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.

answered Nov 16 '17 at 06:05

J.McLaren

611
6
9

score 2 · Answer 5 · answered Jan 27 '22 at 16:03

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>
    );
}

REACT ERROR cannot appear as a child of . See (unknown) > thead > th

5 Answers5

Linked