javascript - React で変数を使用してコンポーネントをレンダリングする

Question

react-icons「カードコンポーネント」にパススルーされた小道具のリストがあります。Card コンポーネントの render メソッドには、次のようなものがあります。

render() {
  ...
  {
     this.props.icons.map(icon => {
        return (
          <div className="icon-square">
            /*   What should I do here so I render the "icon" variable"   */
          </div>
        )
     })
   }
}

注: このリストは、React コンポーネント自体である反応アイコンで構成されています。

いろいろ試してみましたが、アイコンをレンダリングする方法がよくわかりません。誰かが私を助けてくれたら最高です。ありがとうございました

Answer 1

アイコンを配置するだけでラッピングが必要だと思います{}

render() {
  ...
  {
     this.props.icons.map(icon => {
        return (
          <div className="icon-square">
            {icon}
          </div>
        )
     })
   }
}