Reactで動的にタグ名を変えたい

前提・実現したいこと

動的にアイコンタグの名前を変えたいのですが、調べてもやり方がわかりません。
以下のようにタグが繰り返しになるのでmap関数を使って変更したいと思っています。
わかる方がいましたらコメントお願いします。

###エラー

Failed to compile.

./src/components/CustomizedMenus.js
  Line 83:11:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

Search for the keywords to learn more about each error.

該当のソースコード

変更前

<StyledMenuItem onClick={() => onClick(to(category))}>
　<ListItemIcon>
 　<CreateIcon fontSize="small" />
  </ListItemIcon>
  <ListItemText primary="テレビ" />
</StyledMenuItem>
<StyledMenuItem onClick={() => onClick(to(category))}>
 <ListItemIcon>
  <PersonIcon fontSize="small" />
 </ListItemIcon>
 <ListItemText primary="オーディオ" />
</StyledMenuItem>
・
・
・

変更後

{categories.map(category => (
          <StyledMenuItem onClick={() => onClick(to(category))}>
            <ListItemIcon>
              <？？？？？？？ fontsize="small" /> 該当部分
            </ListItemIcon>
            <ListItemText primary={category.name} />
          </StyledMenuItem>
        ))}

state

const initialState = {
  categories: [
    {
      id: '1',
      name: 'テレビ',
      icon: 'CreateIcon'
    },

試したこと

？？？？？の部分に
${category.icon}を入れてみましたがダメでした。

最新のプログラム

export default function CustomizedMenus({ categories, onClick }) {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = event => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const to = category => (
    category.id === '1'
      ? `/all`
      : `/category/${category.id}`
  );

  return (
    <div>
      <Button
        aria-controls="customized-menu"
        aria-haspopup="true"
        variant="contained"
        color="primary"
        onClick={handleClick}
      >
        ボタン
      </Button>
      <StyledMenu
        id="customized-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        {categories.map(category => {
          const TagName = category.icon;
          <StyledMenuItem onClick={() => onClick(to(category))}>##該当箇所
            <ListItemIcon>
              <TagName fontsize="small" />
            </ListItemIcon>
            <ListItemText primary={category.name} />
          </StyledMenuItem>
        })}

行動規範の内容に同意します

回答1件

ベストアンサー

TagNameのような大文字始まりの変数を用意して、その中にCreateIconやPersonIconといったコンポーネントそのものを代入してください。そうすれば、<TagName （属性略） />のように書くことで、それぞれのコンポーネントを表示できます。

投稿2019/11/12 01:32

maisumakun

総合スコア145183

aiai8976

2019/11/12 01:50

コメントありがとうございます。それはmap関数の中で代入するということでしょうか？

maisumakun

2019/11/12 01:51

mapの1回ごとに変えるのであれば、その必要があります。

maisumakun

2019/11/12 01:53

ちなみに、JSXの解釈は、・<Foo />のように大文字始まりの場合…Fooの変数の中身を参照する・<foo />のように小文字始まりの場合…'foo'という文字列として扱って、最終的にはHTMLの同名のタグを生成するというようになっています。

maisumakun

2019/11/12 02:01

（追記に対してのコメント） category.iconの中身は何でしょうか？

aiai8976

2019/11/12 02:02

詳しくありがとうございます。ちなみに上にも追記した通り、mapはタグの中にあって、ここで変数を定義できるのでしょうか。そもそもmaterial-uiからアイコンをimportしているのですが、コンポーネントそのものを代入するにはどうすればいいのでしょうか。質問ばかりですみません。

aiai8976

2019/11/12 02:03

CreateIcon、PersonIconなどが順番に入っています。

maisumakun

2019/11/12 02:04

> CreateIcon、PersonIconなどが順番に入っています。それは「文字列として」ですか？「コンポーネント」が代入されていますか？

maisumakun

2019/11/12 02:07

> mapはタグの中にあって、ここで変数を定義できるのでしょうか。 Arrow Functionを、category => { const ...; }のように、関数本体を取る形に書き換える必要があります。最後にJSXをreturnしてください。

aiai8976

2019/11/12 02:10

>それは「文字列として」ですか？「コンポーネント」が代入されていますか？ stateを追記しました。文字列としてです。コンポーネントを代入するにはどのようにすればいいでしょうか。

maisumakun

2019/11/12 02:16

icon: CreateIconとしてください。mapの中ではそのままconst TagName = category.icon;でいいかと思います。（「コンポーネント」といっても、クラスあるいは関数というJavaScript上のものなので、プロパティに代入したり、変数に入れて引き回したりも可能です）

aiai8976

2019/11/12 03:45

>icon: CreateIconとしてください。mapの中ではそのままconst TagName = category.icon;でいいかと思います。 stateの方でimportしてそのようにしました。

aiai8976

2019/11/12 03:50

>Arrow Functionを、category => { const ...; }のように、関数本体を取る形に書き換える必要があります。最後にJSXをreturnしてください。コードを追記しました。 returnの前の関数や変数を定義している部分でそのように書けばいいでしょうか。

maisumakun

2019/11/12 03:57

> returnの前の関数や変数を定義している部分でそのように書けばいいでしょうか。いえ、場所はmapの中で大丈夫です。

aiai8976

2019/11/12 04:42

このmapの位置をそもそも移動させるということでしょうか？