「return type 'Element[]' is not a valid JSX element」と怒られたときの対処法

reactをtypescriptで書いている時に「return type 'Element[]' is not a valid JSX element.」と怒られたのでその対処法をメモ。

エラー状況

function List() {
  return [1, 2, 3].map(i => {
    return <div>{i}</div>;
  });
}

export function Nanika() {
  return (
    <div>
      <List />
    </div>
  );
 }

この状態だと、

'List' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
  ...

と怒られる。

対処

function List() {
  return (
    <>
      {[1, 2, 3].map(i => {
        return <div>{i}</div>;
      })}
    </>
  );
}

export function Nanika() {
  return (
    <div>
      <List />
    </div>
  );
 }

<></>でmap部分を囲って単一Elementを返すようにする。

参考リンク

• Component cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element
• Component cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element #39391