JSONからとってきた値からreactでタグを出力する方法について

Question

前提・実現したいこと

"components": {
        "AComp": true,
        "BComp": false,
        "CComp": true,
}

例えば，この形式のjsonファイルからキーの文字列を抜き出し<AComp /><CComp />のように出力したいです．

該当のソースコード

Object.keys(components_Data).forEach(function(key){
      if(components_Data[key]){
        var Tag = key;
        drawnTag.push(<{key} />);
      }
    });
    this.setState({ drawnTag });

試したこと

タグの名前部分にJsonファイルから取ってきたキーをつかいたかったので単純に挿入したかったのですが Unexpected tokenとなりダメでした．そのまま挿入するほうほうなどは無いでしょうか？

Comments

[m.ts10806]

Reactはよく知らないですが普通の文字列を""で囲わなくてもいいんですか？Unexpected tokenは単なる構文エラーですよね。

[maisumakun]

ACompやCCompなどは、どこでどのような形で定義されていますか？

[hfidk]

<{key} />を圍むということでしょうか？単に"<{key} />"が出力されてしまいます

[maisumakun]

> mts10806さん

<Tag />のような構文は文字列ではなくReact特有のもので、「JSX」といいます。

[hfidk]

他ファイル内で
class Ccomp extends Component{}とやっています

[m.ts10806]

maisumakunさん
そういうことですね。ありがとうございます。

[jun68ykt]

@hfidkさん
ひとつ前のご質問 https://teratail.com/questions/168828 への私の回答に、コメントで頂きました追加のご質問：「追加するタグの名前をオブジェクトのキー名にすることってできませんか？ 2019/01/17 18:13」への返答として、そちらの回答に「追記 4」を書きましたが、私の説明が下手ですみません。ちょっと分かりにくかったですかね。

[hfidk]

@jun68yktさん
すいません，完全に見落としていました．見直して解決することができました．本当に感謝です

[jun68ykt]

@hfidkさん
「解決することができました．」とのことでよかったです???? それでは一つお願いですが、復習の意味でこちらのご質問のほうに寄せられる回答にも目を通し、いずれかの回答をベストアンサーとされ、解決済みにされることを（今後もteratailを快適に利用されたいのであれば、）お勧めいたします。

[jun68ykt]

????

Answer 1

名前からコンポーネントに変換しましょう。

import AComp from 'path/to/AComp';
import BComp from 'path/to/BComp';
import CComp from 'path/to/CComp';

const COMPONENTS = { AComp, BComp, CComp };


Object.keys(components_Data).forEach(function(key){
      if(components_Data[key]){
        var Tag = COMPONENTS[key];
        drawnTag.push(<Tag />);
      }
    });
    this.setState({ drawnTag });