ERROR DE REACCION no puede aparecer como hijo de . Ver (desconocido) > cabeza > th

Estoy trabajando en una aplicación de reacción – rieles y sigo recibiendo este error en mi consola:

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

No estoy seguro de por qué esto no funciona… Quiero usar el encabezado (thead) para una tabla y funcionó para otra persona. Pondría tbody pero lo necesito para el cuerpo real de la tabla.

aquí está mi código para esta tabla:

```  
     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 He intentado agregar la etiqueta tr debajo de thead y eso causa un error adicional agregado. esto es lo que cambié mi código a:

```
   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

y el siguiente error que recibo es: Advertencia: validateDOMNesting (…): tr no puede aparecer como un elemento secundario de la tabla. Ver (desconocido) > tabla > tr. Agregue a su código para que coincida con el árbol DOM generado por el navegador.

Soy nuevo en reaccionar y no estoy familiarizado con coffeescript, así que me pregunto si tiene que ver con el espaciado o algo así. Probé diferentes espacios y eso no ayudó. Saqué la cabeza por completo y eso hizo que mi aplicación se rompiera, así que… no estoy seguro de cuál es el problema.

Los únicos hijos directos permitidos thead son tr elementosno th.

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

Bien th debe anidarse debajo de un tr No un thead. Documentos

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

Por error, tuve tbody en el interior thead

(1)

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

en lugar de (2)

<thead>
...
</thead>

<tbody>
...
</tbody>

Cambiar a (2) resolvió mi problema.

Me ha aparecido este error debido a errores en otras partes de mi lista.

Por ejemplo @Sag1v tiene <tbody> en vez de </tbody> para cerrar el cuerpo de su lista y apuesto a que está causando el error.

Sólo hay que poner <TableCell /> en el <TableRow />

por ejemplo

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