Parser not spec compliant

[oravecz]

The JSX parser doesn't seem to support this syntax, which I believe to be valid JSX.

return data => <div {this.id && 'id="{this.id}"'}>Some Content</div>

[oravecz]

Apologies, as my example was not compliant JSX. In fact, if my attribute (id in this case) is falsey, the attribute is excluded from output.

return data => <div id={this.id}>Some Content</div>

renders as the following if this.id is falsey:

<div>Some Content</div>

I'm not sure if it is a bug, but including double quotes around the JS expression results inthe expression not being transpiled as code.

return data => <div id="{this.id}">Some Content</div>

ends up rendering:

<div id="{this.id}">Some Content</div>

For completeness sake, an alternative approach that allows me to specify multiple attributes is such:

const attrs = {
  class: 'foo bar'
}
if (this.id) attrs.id = this.id
return data => <div {...attrs}>Some Content</div>

[jridgewell]

In fact, if my attribute (id in this case) is falsey, the attribute is excluded from output.

That's iDOM. If id is undefined, the attribute is removed from the node. If it's false, it'll turn into <div id="false">

but including double quotes around the JS expression results inthe expression not being transpiled as code

That's the JSX spec. Putting quotes around the expression turns it into a StringLiteral.

---

Try playing around with http://astexplorer.net/#/4dNPqEfWV3 to see how Babel interprets the JSX into AST. We then use the AST to transform into iDOM calls.