I'm currently developing an application which uses old version of React, and it does not yet include Fragments. For now, I won't be able to upgrade version of React.

In the application, I'm currently doing modifications to a table where the use of Fragments would be great. I added nested map which goes through subitems and adds them to the table. Here is how it would probably work if Fragments were an option:

  <tbody>
{expenses.budgetedAmounts
.sort((a, b) => {
  return a.department < b.department;
})
.map((item, index) => (
 <React.Fragment>
 <tr
    key={index}
  >
    <td>
      {item.name}
    </td>

    <td>
      {item.budgetedExpense}
    </td>

    <td>
      {item.actualExpense} 
    </td>

    <td>
      {item.percentageUsed} 
    </td>

    <td>
      {item.availableExpense}
    </td>
  </tr>
  {item.nestedItems.map((nested, secondIndex) =>   
  <tr>
    <td> {nested.name}</td>  
    <td> {nested.price} </td>
  </tr>)}
  </React.Fragment>
))}

JSX expressions must have one parent element, hence the use of Fragment would be nice. Is there a way to do this easily without using Fragments and messing up the table structure?