TypeScript + React SFCでmapを使うとJSX element type 'Element | Element[]' is not a constructor function for JSX elements.になった話

はじめに

詳細についてはGitHubのIssueみた方が早いです
https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20356
https://github.com/edorivai/ts-sfc-array

ざっくり

• SFCでmapをreturnするとTypeScriptでエラーがでる
• Fragmentでarrayにしなければ解決する
• Class Componentにしても解決する

現象

const Lines = () => {
  return [1,2,3].map((id, key) => <li key={key}>{id}</li>)
}

export default () => (
  <ul>
    <Lines />
  </ul>
)

これがエラーになる。

TypeScript error in /Users/develop/dashboard/src/LineItems.tsx(69,9):
JSX element type 'Element | Element[]' is not a constructor function for JSX elements.
  Type 'Element[]' is not assignable to type 'Element'.  TS2605

  > 69 |         <Lines />
       |         ^
    70 |       </ul>

対応１： 配列を返さないようにする

全部ちゃんと読んだわけではないのですが、Listになっているのが問題な様子なので、配列じゃない形にすれば回避できます。

export default () => (
  <ul>
    {[1,2,3].map((id, key) => <li key={key}>{id}</li>)}
  </ul>
)

まとめれない場合は、<>や<Fragment>を使うとよいでしょう。

対応２： SFCをやめる

とはいえTable系のマークアップだったりするとうまくまとめれないこともあります。
そういうときは、昔ながらのClassを使う形でも回避できます。

class Lines extends React.Component {
  render() {
    return [1,2,3].map((id, key) => <li key={key}>{id}</li>)
  }
}

export default () => (
  <ul>
    <Lines />
  </ul>
)