React not ordering JSX elements correctly - html

Question

I'm new to React.
Here is my code inside a React component:
for (var i = 0; i < fields.length; i++) {
rows.push(
<tr>
<td>...</td>
<td>...></td>
</tr>
)
}
return (
<tr>
<form className="updateForm" onSubmit={this.handleSubmit}>
<td>
<table>
{rows}
</table>
</td>
<td>
<button id={this.props.id} name="Update" type="button">Update</button>
<button id={this.props.id} name="Delete" type="button">Delete</button>
<button id={this.props.id} name="Add" type="button">Add</button>
</td>
</form>
</tr>
Here is the output HTML:
<tr data-reactid=".au4np63w8w.1.0.1.0.$0">
<form class="updateForm" data-reactid=".au4np63w8w.1.0.1.0.$0.0"></form>
<td data-reactid=".au4np63w8w.1.0.1.0.$0.0.0">
<table data-reactid=".au4np63w8w.1.0.1.0.$0.0.0.0">
<tbody>
...
</tbody>
</table>
</td>
<td data-reactid=".au4np63w8w.1.0.1.0.$0.0.1">
<button id="0" name="Update" type="button" data-reactid=".au4np63w8w.1.0.1.0.$0.0.1.0">Update</button>
<button id="0" name="Delete" type="button" data-reactid=".au4np63w8w.1.0.1.0.$0.0.1.1">Delete</button>
<button id="0" name="Add" type="button" data-reactid=".au4np63w8w.1.0.1.0.$0.0.1.2">Add</button>
</td>
</tr>
Notice that the form element that is supposed to include the table cells renders so that the table cells are outside of the form. I would expect that it should all be WYSIWYG. Am I doing something wrong or is it an actual bug? BTW, I'm using Babel with Webpack to parse JSX.

Answer 1

This is not a bug in React but rather the browser cleaning your erroneous semantics up.
A form element is not allowed as a direct child of a tr element. That's why your browser/React is outputting the HTML you see.
Paste below HTML in JSBin/Fiddle or the W3 validator and see the results
<table>
<tr>
<form>
<td>Hello!</td>
</form>
</tr>
</table>
A td can contain a form or a form can contain a table.