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

Question

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?

Answer 1

You just need to :

IconStyle: {
    IconTitle: BsBraces
}

without the </>

Apply it to JSX like:

<IconStyles.IconTitle />