Self-closing tags and custom components

[ischenkodv]

I'm trying to convert HTML with my custom component named "Data". It looks like this:

<div>
  <br/>
  <Data name="foo"/>
  <p>After</p>
</div>

As I result I get the following JSX in which the paragraph becomes the child of a Data tag and the tag itself is lowercased:

var MyTemplate = React.createClass({
  render: function() {
    return (

      <div>
        <br />
        <data name="foo">
          <p>After</p>
        </data></div>
    );
  }
});

Is this an expected behaviour?

[Daniel15]

This library is really designed to only handle HTML - Data is not a regular HTML tag 😛

[KyleAMathews]

I need this supported too — couldn't we just leave the casing of tags alone?

[NathanLawrence]

Yeah...I'm a little confused about what's going on here. If you have actual React components you're mixing with React Magic, there's a reason this isn't supported -- you'll potentially be creating colossal memory leaks and violating just about every React best practice.

It seems like the way to handle this would be to avoid using React Magic and instead work on reconstructing all the major page elements in React with properly nested components. I know that sounds like a lot of extra effort, but I think you'll regret anything less in the long run.

[NathanLawrence]

@KyleAMathews is this a Gatsby issue? If so, I'm definitely starting to understand why you might need or want this, even if it is against best practices -- I'm not sure how to get around this yet, though. Looking through the parser, I'm nervous this may be more than just a casing issue by the time we get to the bottom of it.

[KyleAMathews]

I just want the HTML to jsx piece not the magic bit. I am interested in it for gatsby. Working on making it so you can add jsx to markdown. Would to compile to HTML from markdown then to jsx and need the jsx to survive through that. Could also write a markdown to jsx convertor which might be easier actually.

[Daniel15]

couldn't we just leave the casing of tags alone?

It's using the browser's HTML parser, which tends to convert tags to lowercase (as regular HTML tags are not case sensitive). This library was designed only for use as a HTML to JSX converter, not a HTML+JSX to JSX converter, and thus it does not support the use case of a chunk of HTML that has existing JSX elements in it.

The Node.js build uses jsdom instead, but it works similarly. This library is really built for use in a browser though.