【React】「Error: List(...): Nothing was returned from render」のエラーが出た

完全に個人の備忘録です。

React + TypeScriptで書いている時に以下のエラーが出たのでメモ。

# VSCode側
'Component' cannot be used as a JSX component.
Its return type 'Element | undefined' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.ts(2786)

# ブラウザ側
Unhandled Runtime Error
Error: List(...): Nothing was returned from render.
This usually means a return statement is missing.
Or, to render nothing, return null.

環境

• PC: MacBook Pro (Intel Core 2016)
• OS: macOS Montery12.3.1
• Node.js v16.10.0
• React.js v17.0.2

結論

• returnしてるけどDOMを返していないとこのエラーになるので、return <></> とかにする

例

// ❎
if (!fetchData) {
  return;
}

// 🟢
if (!fetchData) {
  return <></>;
}