Js/React loop data table with one row and multiple columns

The final rendering effect:

 

data structure:

const hfAmounts = [2, 5, 10, 20, 50, 100, 200];

 

React loop through:

<table>
  <tbody>
  {
    hfAmounts.map((v, i) =>
      i % 3 === 0 ?
        <tr key={i}>
          {
            hfAmounts.slice(i, (i % 3 === 0 ? i + 3 : i % 3)).map((y, j) =>
              <td key={j}>{y}元</td>
            )
          }
        </tr>
        : null
    )
  }
  </tbody>
</table>

 

Option 2 (Div or li implementation):

{
  hfAmounts.map((v, i) =>
    <div key={i}>{v}元</div>
  )
}
{
  Array.apply(null, {length: 3 - hfAmounts.length % 3}).map((v, i) =>
    <div key={i}> </div>
  )
}