Search code examples
reactjscreateelement

Is there way how in react create unpaired Tag?

This code:

const Name = 'Value';
<Name/>

will create:

<value></value>

but I am interested in getting

<Value/>
Solution

  • <Value /> (with a uppercase V) is same as <value /> in HTML because HTML is case insensitive.

    And “self-closing tag” <value /> is just a shorthand syntax to HTML <value></value>. This is how HTML parses code. It’s just an aesthetic thing, no real difference.

    You can open Chrome devtool on any web page, right click on any element do “Edit as HTML”. Type <Value />, <Value></Value>, you’ll see they all translate to <value></value> in HTML.

    The textual representation of code structs is superficial. What code really looks like in machine’s view, be it HTML, JSX, or even C, Python, really any language, they all become a data structure call AST (abstract syntax tree). What matters is the type of node on that tree, diff textual representation can be translated to same type of node on AST.