Mike Rodov Mike Rodov - 2 months ago 11
React JSX Question

ReactJS: Show custom element name in html

Let's say I rendered the following react element

<CustomElement />


let's say that CustomElement - is rendered as

<div>somethingelse</div>


In HTML I'll see
<div>somethingelse</div>


Question: Is there a way to display
<div-CustomElement>somethingelse</div-CustomElement>

Or something similar, I've heard that it's possible but didn't find a way to do this.

P.S. I'm not talking about setting class names or this kind of stuff for recognizing the element. I'm talking about the element name itself to be displayed as a custom element.

Answer

You can add a custom html tag and it will show up in the DOM tree:

class App extends React.Component {
  render() {
    return <div-CustomElement>Hello React</div-CustomElement>;
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Here is a demo: http://codepen.io/PiotrBerebecki/pen/xEqLzr and here you can inspect it easily with dev tools: http://s.codepen.io/PiotrBerebecki/debug/xEqLzr