score:0

    <tbody>
      {expenses.budgetedAmounts
        .sort((a, b) => a.department < b.department)
        .flatMap(a => [a, ...a.nestedItems])
        .map((item, index) => (
          <tr key={index}>
            <td>{item.name}</td>
            <td>{item.budgetedExpense ?? item.price}</td>
            <td>{item.actualExpense ?? ""}</td>
            <td>{item.percentageUsed ?? ""}</td>
            <td>{item.availableExpense ?? ""}</td>
          </tr>
        ))}
    </tbody>

score:0

<tbody>
    { budgetedAmounts.map((item,index)=>{
      return(
      <> 
      <tr key={index + "b"}> 
         <td>{item.name}</td>
         <td>{item.budgetedExpense}</td>
         <td>{item.actualExpense}</td>
         <td>{item.percentageUsed}</td>
         <td>{item.availableExpense}</td>
      </tr>
      { item.subItem && item.subItem.map((subItem,subIndex)=>{
          return(
             <tr key={item.id + " __ "+subIndex}>
             <td>{subItem.name}</td>
             <td>{subItem.budgetedExpense}</td>
             <td>{subItem.actualExpense}</td>
             <td>{subItem.percentageUsed}</td>
             <td>{subItem.availableExpense}</td>
             </tr>
          )
       })
      }
     </>
   )
 })
}
</tbody>

score:0

  <tbody>
  {expenses.budgetedAmounts
    .sort((a, b) => {
      return a.department < b.department;
    })
    .map((item, index) => (
      <><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>)}</>
    ))}
</tbody>

Related Query

More Query from same tag