オブジェクトにReactNodeを格納したい

Question

import ExitToAppIcon from "@material-ui/icons/ExitToApp";

export const MENUS = [
  {
    name: "sign-in",
    path: "sign-in",
    icon: render(<ExitToAppIcon />),
  },
];

の様にして
別ファイルでMENUS[0].icon
を呼び出したいのですが、

ExitToAppIcon' refers to a value, but is being used as a type here. Did you mean 'typeof ExitToAppIcon'?

となってしまいます。

オブジェクトにReactNodeを格納する方法をご教授願えないでしょうか？

Comments

[maisumakun]

ご提示のコード内のrender関数は、ReactDOM.renderでしょうか？

[roooo]

そうです。

Answer 1

renderせずにJSXをそのまま書くべきものなのではないでしょうか？

export const MENUS = [
  {
    name: "sign-in",
    path: "sign-in",
    icon: <ExitToAppIcon />,
  },
];

あと、エラーメッセージからすると、「TSXモードに入っていなくて<...>が型変換と認識されている」可能性も考えられます。TSXの設定を行ったか、そして拡張子を.tsxとしているかも要確認です。

Comments

[roooo]

ありがとうございます。解決しました！