CODEWITHSUNDEEP
reactjs
Mike Rodov
Mike Rodov

Reputation: 597

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.

Upvotes: 3

Views: 586

Answers (2)

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

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

Upvotes: 2

Shubham
Shubham

Reputation: 1191

You may used 'document.registerElement('div-CustomElement', reactClass)' for creating own custom tag as html.

For more information you can check this link

Upvotes: 2

Related Questions