Reactjs - Splitting table row into two rows - fields are not aligning properly - reactjs

Question

Am trying to split table row into two rows. So, i writting two tr tag in my render() method. Am able to split the rows but, its alignment is not coming properly.
All the fields are rendering in the first column itself. How can i split the table properly.
Am using Reactjs V 15.6.1
class Details extends React.Component {
constructor(props) {
super(props);
this.state = { item: props.item };
}
render() {
return (
<table className="table table-bordered" style={{fontsize: '8'}}>
<thead>
<tr>
<th>Line Number</th>
<th>Product Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
</tr>
</thead>
<DetailsList items={ this.state.item.order_items } />
</table>
);
}
}
class DetailsList extends React.Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (<tbody>{ this.props.items.map((item) => <DetailsItem key={
item.line_id } item={ item } />) }
</tbody>);
}
}
class DetailsItem extends React.Component {
constructor(props) {
super(props);
this.state = { item: props.item };
}
render() {
return (<tbody>
<tr>
<td><input name="line_number" type="text"
value={ this.state.item.line_number } /> </td>
<td><input name="product_code" type="text"
value={ this.state.item.product_code } /></td>
<td><input name="product_description" type="text"
value={ this.state.item.product_description } /> </td>
</tr>
<tr>
<td>{ this.state.item.product_quantity } </td>
<td>{ this.state.item.unit_net_price } </td>
</tr>
</tbody>
);
}
}
Please find my output screenshot below. All fields are rendered in the same column. Its happening while am adding second table row tag.
Also, if remove <tbody> tag from the return() method also its throwing error Adjacent JSX elements must be wrapped in an enclosing tag.

Answer 1

ReactJS V 15.x.x only allow one components within render() method. Its not possible to return multiple <tr> tag. This has been addressed from ReactJS 16+ https://reactjs.org/docs/jsx-in-depth.html.