A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
which results in a correct <Table /> output of:
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
Instead of this
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>