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(...):  cannot appear as a child of &l         


        

Answer 1

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

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

Answer 2

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>

Answer 3

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.

Answer 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.