How do you make React.js output valid xml instead of html?

Question

I'm encountering a problem where React.js is omitting closing tags for elements which don't require them in html (but do require them in XML) such as <input>

For example (jsfiddle: http://jsfiddle.net/hc4hs9on/)

console.log(React.renderComponentToString(<input></input>));

will output

<input data-reactid=".0" data-react-checksum="1975453773">

Which throws an error DOMException: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML, and therefore cannot be inserted into an XML document. if you try to render the component.

How do I tell react that I want it to send me correct markup?

It seems that it might be impossible. In the mean time I've edited the source to make it not omit any closing tags but I'll leave this question up incase someone else has a better way. — david
– david, Commented Oct 14, 2014 at 7:32
Latest react release has this note: When possible, React DOM now generates XHTML-compatible markup. — david
– david, Commented Sep 10, 2015 at 22:34

Brigand · Accepted Answer · 2014-10-14 08:00:37Z

3

Yes, you'd need to modify the source code of React.

Luckily it's a single line (though I haven't tested it):

// ReactDOMComponent.js L178 on master
var closeTag = omittedCloseTags[this._tag] ? '' : '</' + this._tag + '>';
// change it to:
var closeTag = '</' + this._tag + '>';

XHTML is mostly considered irrelevant... take a good look to see if you have any strong reasons to continue using it.

answered Oct 14, 2014 at 8:00

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

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

Collectives™ on Stack Overflow

How do you make React.js output valid xml instead of html?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related