I have a list of react-icons passed through props in a "Card Component". In my Card ponent's render method, I have something like this:

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

Note: The list consists of react-icons which are React ponents themselves.

I tried a lot of things, but I can't quite figure out how I can render the icon. It would be awesome if someone could help me. Thank you

I have a list of react-icons passed through props in a "Card Component". In my Card ponent's render method, I have something like this:

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

Note: The list consists of react-icons which are React ponents themselves.

I tried a lot of things, but I can't quite figure out how I can render the icon. It would be awesome if someone could help me. Thank you

• javascript
• reactjs
• react-icons

• 1 Have you tried {icon}? – Nadia Chibrikova Commented Jan 20, 2021 at 19:16
• Please include what props.icons array is so we can see what each element is that you are attempting to render. Include what you've already tried so we're not playing 20 questions. Minimal, Complete, Reproducible Example – Drew Reese Commented Jan 20, 2021 at 19:17
• Have you tried icon()? – Luke Storry Commented Jan 20, 2021 at 19:17
• I'll go with @NadiaChibrikova's answer. Of course if the icon is JSX element. – Eldshe Commented Jan 20, 2021 at 19:18
• Ah yes, icon(icon) works. Thank you – Jam Dos Commented Jan 20, 2021 at 19:23

4 Answers 4

Let say you've passed a list of an icon like

import { FaBeer, FaBug, FaAnchor, FaCoffee } from 'react-icons/fa';

const icons = [FaBeer, FaBug, FaAnchor, FaCoffee];

ReactDOM.render(
    <CardComponent icons = {icons} />,
    document.querySelector('root')
};

CardComponent.js

class CardComponent extends React.Component{
...

render() {

  // Icon is a Component
  return (
    this.props.icons.map((Icon) => {
     return <Icon />
    });
  )

 }
}

If the icon is a react ponent, then:

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

Here is two difference for use your icon, If you pass as a JSX you should use {icon} But if you pass as a ponent you should use like this <Icon/>

I think wrapping you need to just put icon is {}

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