React keeps escaping the amp character (&) in attributes
13,380
Well, I just realized, that for my particular use case I can simply get away with:
<i data-icon={String.fromCharCode( "f00f" )} />
https://github.com/facebook/react/issues/3769
Related videos on Youtube
Author by
Taig
Updated on June 06, 2022Comments
-
Taig about 2 years
I have a component with a
data-icon
attribute. The value of this attribute should be, for instance,
so that css can render it viacontent: attr( data-icon );
.However, whatever I try: React keeps escaping to
&
. Even when I provide the proper unicode character\u0026#xf00f
.Is there some way to stop React from messing with that value? Besides dangerously setting inner html, as I do not want to add another wrapper.
Component
define( [ 'react', 'util' ], function( React, Util ) { return React.createClass( { render: function() { //var amp = '\u0026', var amp = String.fromCharCode( 38 ), // Util.icons[x] returns a String, such as "f00f" code = amp + '#x' + Util.icons[this.props.name] + ';'; return ( <i data-icon={code}> {this.props.children ? <span>{this.props.children}</span> : null} </i> ); } } ); } );
Usage
<Widget.Icon name="add" />
Output
<i data-icon="&#xf0fb;" data-reactid=".170lse36465.7.0"></i>
-
Taig about 9 yearsUnfortunately css does not interpret this as an utf8 character when I use the attr() feature. It just prints out the exact same string then.
-