How to Fix the “REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th” Error When Developing React Apps?

Sometimes, we may encounter the “REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th” error when developing React apps.

In this article, we’ll look at how to fix the “REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th” error when developing React apps.

Fix the “REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th” Error When Developing React Apps

To fix the “REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th” error when developing React apps, we should make sure that the direct child elements of the table element is a either thead or tr element.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <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>
  );
}

to render a table with the proper headings and rows.

We only put tr elements in the tbody elements.

Fix the “REACT ERROR th cannot appear as a child of thead. See (unknown) > thead > th” Error When Developing React Apps

Conclusion