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.

Answer 1

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 :)

Answer 2

You'll have to do something like

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

so,

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