Why can't an element defined inside a tr be a child of a tbody?
<p>I'm making a little lottery game to learn React. The goal is something like <a href="https://cdn.vectorstock.com/i/composite/98,05/lottery-ticket-vector-209805.jpg" rel="nofollow">this</a>: click a button and it fills a table 18x6 with random numbers.</p>

<p>So I have a <code>table</code>, and that table has a <code>tbody</code>.</p>

<p>I define a React component, <code>Ball</code>, which represents a single table cell containing a number 1-40:</p>

<pre><code>const Ball = props =&gt; {
    return (
        &lt;td className="ball"&gt;
            {Math.floor(Math.random() * (40 - 1) + 1)}
        &lt;/td&gt;
    );
}
</code></pre>

<p>Then I define a ballRow, which is simply a row of six balls.</p>

<pre><code>const ballRow = props =&gt; {
    return (
        &lt;tr&gt;
            &lt;Ball /&gt;
            &lt;Ball /&gt;
            &lt;Ball /&gt;
            &lt;Ball /&gt;
            &lt;Ball /&gt;
            &lt;Ball /&gt;
        &lt;/tr&gt;
    );
}
</code></pre>

<p>Now I render my first row in the table:</p>

<pre><code>ReactDOM.render(&lt;ballRow /&gt;, document.getElementsByTagName("tbody")[0]);
</code></pre>

<p>But this fails because <code>&lt;ballrow&gt; cannot appear as a child of &lt;tbody&gt;</code>.</p>

<p>This confuses me. A <code>ballrow</code> is a <code>tr</code> element, which is exactly what goes inside a <code>tbody</code>. So why wouldn't it be a valid child?</p>