javascriptreactjsobjectreact-icons

React - How to specify an icon in an object as a value

I have an array with objects before, I applied icons from fontAwesome as a value, it looked like this

const SideBarColors = [
   {
        IconStyle: {
            Icon: faDotCircle,
        }
   }
]

Then in another component I got this icon like this

<FontAwesomeIcon icon={SideBarStyle.Icon} />

Now I use a different approach (React Icons), the point is that now I create icons in this way

<BsBraces />

In this case, I cannot assign this icon inside the object as a value, it gives an error

IconStyle: {
    IconTitle: <BsBraces />
}

What should I do in this case?

Solution

  • You just need to :

    IconStyle: {
    IconTitle: BsBraces
}

    without the </>

    Apply it to JSX like:

    <IconStyles.IconTitle />