I have a component with a data-icon attribute. The value of this attribute should be, for instance, &#xf00f so that css can render it via content: 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="&amp;#xf0fb;" data-reactid=".170lse36465.7.0"></i>

I have a component with a data-icon attribute. The value of this attribute should be, for instance, &#xf00f so that css can render it via content: 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="&amp;#xf0fb;" data-reactid=".170lse36465.7.0"></i>

• javascript
• css
• escaping
• reactjs

• 1 Unfortunately css does not interpret this as an utf8 character when I use the attr() feature. It just prints out the exact same string then. – Taig Commented Apr 27, 2015 at 23:49
• Can you post the code for your component, please? – Henrik Andersson Commented Apr 28, 2015 at 5:55
• @limelights I added some details (: – Taig Commented Apr 28, 2015 at 12:28
• I can't seem to reproduce it... Can you make a JSFiddle or JSBin that illustrates your problem? – Henrik Andersson Commented Apr 28, 2015 at 12:56
• There you go jsfiddle.net/69z2wepo/7277. Unfortunately in the browser dev tools the generated output seems correct (as the & is displayed as &), but you can see that the css struggles (It should display an invalid character). With serverside rendering in my app I can see the undesired & output in the html source. – Taig Commented Apr 28, 2015 at 13:09

1 Answer 1

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