React 複数のタグを返して render したい

ReactのJSXで複数のタグを返すコンポーネントを作りたい時

JSXはルートが1つのタグでないとエラーになる

例がアレだけど、これはエラーになる

function ListData() {
  // トップの改装に複数のタグあるとエラーになる
  return (
    <li>星宮いちご</li>
    <li>霧矢あおい</li>
    <li>紫吹蘭</li>
  );
}

class List extends React.Component {
  render() {
    return (
      <ul>
        <ListData />
      </ul>
    )
  }
}

ReactDOM.render(
  <List />,
  document.getElementById('root'),
);

👇

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag.
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag.

React.Fragment を使う

複数のタグが並列したエレメントをrenderしたい場合は<React. Fragment>で囲えばOK

function ListData() {
  return (
    <React.Fragment>
      <li>星宮いちご</li>
      <li>霧矢あおい</li>
      <li>紫吹蘭</li>
    </React.Fragment>
  );
}

<React.Fragment>はDOMとして出力されないので、エラー回避のために<div>で囲って余計なタグを出力してしまうこともない。
<></>というショートタグもあるけど、~~まだサポートされていないのが多いみたい。~~
追記もう十分サポートされてるので <></> を使うのが良さそうです！

ループで作成したものだとエラーにならない

JSXを直接returnする際にトップの階層にタグが複数あるとエラーになるけど、map()などのループで作成した配列として返せばエラーにならないっぽい。

function ListData() {
  const data = ['星宮いちご', '霧矢あおい', '紫吹蘭'];
  const listData = data.map((val, i) => {
    return (<li key={i}>{val}</li>);
  });
  // エラーにならない
  return listData;
}