Roine

Empty Tag in React

December 22, 2018

When you need to return more than one element you have few solutions.

Wrap with an element

<div>
  <span>1</span>
  <span>2</span>
</div>

Return a list (requires a key)

function List() {
    return [<span key='1'>1</span>, <span key='2'>2</span>]
}

Use Fragment (16.2.0+)

<Fragment>
  <span>1</span>
  <span>2</span>
</Fragment>

Use empty tag (some kind of alias for Fragment)

<>
  <span>1</span>
  <span>2</span>
</>