Correctness of layout in React
The layout in JSX must be correct. In particular, not all tags can be nested. For example, if you place a paragraph in the ul tag, this will lead to an error.
In addition to the more or less obvious unacceptable nestings, there are also unexpected ones: tables.
In tables, we are used to immediately putting tr tags into the table tag, like this:
function App() {
return <table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>;
}
This code in React will result in a console warning because tr must be nested either in a tbody tag, or in a thead tag, or in a tfoot tag.
Let's fix the problem by making our table correct:
function App() {
return <table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>;
}
Make a table with three rows and three columns.
