Motivation for fragments

A common pattern is for a component to return a list of children. In the below example when Column component is rendering the HTML will be invalid as a div is coming in the middle of the table. Whenever we are using Fragments, we can avoid that.

Take this example React snippet:

class Table extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    );
  }
}

would need to return multiple elements in order for the rendered HTML to be valid. If a parent div was used inside the render() of , then the resulting HTML will be invalid.

class Columns extends React.Component {
  render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    );
  }
}

results in a output of:

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>