REACT ERROR <th> cannot appear as a child of <thead>. 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

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>