Custom HTML Element Tag within React JSX

Question

We're using a component library which uses custom elements. This requires us to use custom HTML tags within our JSX. For a very simple example:

var App = React.createClass({
   render: function() {
       return <niner/>;
   }
});

React.render(
        <App/>,
        document.getElementById('content')
);

In this particular case, I just need React to output a niner tag without it trying to do anything too special with it. I intentionally have no niner React component.

According to JSX in depth,

React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.

Which led me to believe that ReactJS would just treat <niner/> as a regular HTML tag and not choke on it. When I run the code above, however, I get the following error:

Uncaught TypeError: Cannot read property 'replace' of undefined 10734305_1719965068228170_722481775_n.js:94
createSourceCodeErrorMessage 10734305_1719965068228170_722481775_n.js:141
transformCode 10734305_1719965068228170_722481775_n.js:187 
run 10734305_1719965068228170_722481775_n.js:242
check 10734305_1719965068228170_722481775_n.js:295
loadScripts 10734305_1719965068228170_722481775_n.js:324 
runScripts

Do I need to do some sort of wizardry to get this to work? Thanks.

zackify · Accepted Answer · 2014-12-01 19:10:08Z

5

You'll have to do something like

<div dangerouslySetInnerHTML={{__html: '<niner/>'}} />

so,

var App = React.createClass({
   render: function() {
       return <div dangerouslySetInnerHTML={{__html: '<niner/>'}} />;
   }
});

answered Dec 1, 2014 at 19:10

zackify

5,4542 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aaronius Over a year ago

Thanks @zackify. I sure hope not, but I appreciate the response!

zackify Over a year ago

It's the only thing you can do.

Ramon Gebben · Accepted Answer · 2015-09-24 10:40:38Z

4

You don't need to do anything. I just tried this

var ComponentExample = React.createClass({
    render: function() {
      return (
          <niner>This is a niner element</niner>
      )
    }
});


React.render(<ComponentExample/>, mountNode);

So no you would not need any wizardry to get it to work. Maybe it's a problem with the way you bundle?

Hope it helps :)

answered Sep 24, 2015 at 10:40

Ramon Gebben

5551 gold badge4 silver badges18 bronze badges

2 Comments

Aaronius Over a year ago

Thanks Ramon. They recently added support for this so wizardry is no longer required (as you've noted).

Abraham Over a year ago

is this always safe to use?

Collectives™ on Stack Overflow

Custom HTML Element Tag within React JSX

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related