[React] jsx内でtableを使うとWarningが出る

Question

OKかどうかわからない

ReactのJSX内でtableを使うとWarningが出ます。
表示自体は問題なく表示されますが、こちらは特に問題ありませんか？
またこのようなWarninngはなぜ出るのですか？Reactの仕様ですか？

const Sample = () => {
  return (
    <>
        <table>
            <tr>
                <th>所属</th>
                <td>会社員</td>
            </tr>
        </table>
    </>
  );
}

Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

Answer 1

メッセージのとおりです。<table>と<tr>の間に<tbody>を書いてください。

Comments

[maisumakun]

<table>直下に<tr>を置いた場合のDOM構造がブラウザによって違って安定しない、という事情もあり、Reactでは<tbody>も明示する必要があります。

[DaisukeMori]

ありがとうございます。ご指摘の通りにしたらWarningが消えました。