While using dangerouslySetInnerHTML
does work, I recommend avoiding it in this case since you are in control of the markup. That attribute starts with dangerously
for a reason: those badges are now a vector for code injection.
render() {
const BADGE_ID_TO_ICON_CLASS_NAME = {
'0': 'fa-briefcase',
'1': 'fa-shopping-cart',
...
};
return (
<div className="pull-right">
{user.get('achievements').badges.map(badge => (
<h3 key={badge.id}>
<span
className={`fa fa-fw ${BADGE_ID_TO_ICON_CLASS_NAME[badge.id]}`}
/>
<small>{badge.text}</small>
</h3>
))}
</div>
);
}