Rendering a component using a variable in React

Question

I have a list of react-icons passed through props in a "Card Component". In my Card component'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 components 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

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](https://stackoverflow.com/help/minimal-reproducible-example) — Drew Reese, Jan 20 '21 at 19:17
I'll go with @NadiaChibrikova's answer. Of course if the `icon` is JSX element. — Eldshe, Jan 20 '21 at 19:18

score 3 · Answer 1 · answered Jan 20 '21 at 19:21

3

If the icon is a react component, then:

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

answered Jan 20 '21 at 19:21

lissettdm

12,267
1
18
39

score 3 · Accepted Answer · answered Jan 20 '21 at 19:33

3

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 />
    });
  )

 }
}

answered Jan 20 '21 at 19:33

DecPK

24,537
6
26
42

1

This answer is very similar to @lissettdm's answer – Kurosaki_Ishigo Jan 20 '21 at 20:29
@Kurosaki_Ishigo My answer specifically indicates what and how props we should pass to CardComponent.As Jam is a new contributor, So I thought it would be more helpful if I could explain him as deep as possible. Sometimes new programmer like me faces difficulties to understand even the answers from the SOF community. – DecPK Jan 21 '21 at 08:03

score 1 · Answer 3 · edited Jan 20 '21 at 19:44

1

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

edited Jan 20 '21 at 19:44

Drew Reese

165,259
14
153
181

answered Jan 20 '21 at 19:27

Muhammad Minhaj

109
1
7

Yes, brother, You're absolutely right. I agree with you. It was my mistake. Thanks for pointing out my mistake. – Muhammad Minhaj Jan 20 '21 at 19:53

score 0 · Answer 4 · answered Jan 20 '21 at 19:17

0

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

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

answered Jan 20 '21 at 19:17

Maheer Ali

35,834
5
42
73

I tried `{icon}` and it does not work. I checked it Google Chrome's Inspect and this is what I get, `
– Jam Dos Jan 20 '21 at 19:22

Rendering a component using a variable in React

4 Answers4