Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

340
Visualizações
REACT ERROR <th> cannot appear as a child of <thead>. See (unknown) > thead > th

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

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

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

<table>
  <thead>
    <tr>
      <th />
    </tr>
  </thead>
  ...
</table>
over 4 years ago · Santiago Trujillo Relatório

0

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>

over 4 years ago · Santiago Trujillo Relatório

0

Mistakenly, I had tbody inside thead

(1)

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

instead of (2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Changing to (2) solved my problem.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda