How to convert string to component in reactjs?

Question

i have a icons name array like this:

const iconArray = [
  {
    link: "/",
    iconName: "MdHome",
    iconSize: 28,
    notiNumber: 5,
  },
  {
    link: "/account",
    iconName: "MdAccountCircle",
    iconSize: 28,
    notiNumber: 5,
  },
  {
    link: "/menu",
    iconName: "MdReorder",
    iconSize: 28,
    notiNumber: 5,
  },
]

I want converting iconName to components name like this <MdHome size="28" />, <MdAccountCircle size="28" />, <MdReorder size="28" />

This is my code:

iconArray.map(icon => {
  return <{icon.iconName} size={icon.iconSize} />
})

When run it will to error

score 3 · Accepted Answer · answered Jan 19 '21 at 12:57

Just make your iconArray like this:

const iconArray = [
  {
    link: "/",
    icon: <MdHome size="28" />,
    notiNumber: 5,
  },
  {
    link: "/account",
    icon: <MdAccountCircle size="28" />,
    notiNumber: 5,
  },
  {
    link: "/menu",
    icon: <MdReorder size="28" />,
    notiNumber: 5,
  },
]

and use them like this:

iconArray.map(icon => icon.icon)

S.N.B · Answer 2 · 2021-01-19T13:04:42.670

There are two ways create components in react, one functional component

export function iconName(props) {

return(
  <div>
   <MdHome size="props.size" />

  </div>
)
}

and class Components such as

import React, {Component}
export class IconName extend React.Component{
  constructor(props) {
     super(props);
   }

   render() {
     return(

       <div>
          <MdHome size="props.size" />
       </div>
     )
  }
}

then import component as follow

import {IconName} from 'myComponentfile'

return (
  <IconName size="28" />
)

How to convert string to component in reactjs?

2 Answers2