Can't use JSXExpressionContainer as a child

[mwiencek]

I'm using babel 6.2.1 with version 2.0.1 of the plugin. I'd like to do something along the lines of:

<If condition={foo}>
  {'foo'}
</If>

Or with any expression that can be enclosed in {}. But I get a nasty error instead:

Property consequent of ConditionalExpression expected node to be of a type ["Expression"] but instead got "JSXExpressionContainer" at Object.validate

[AlexGilleran]

So the fact that there is an error in general makes sense, keep in mind that that desugars to:

foo ? {'foo'} : ''

Which isn't valid Javascript or JSX - it has to be either:

<If condition={foo}>
 <span> {'foo'} </span>
</If>

or (this one I never do but I think it should work?)

<If condition={foo}>
  'foo'
</If>

However, our transformer should really catch it and throw a nicer error message than that before it gets to Babel.

EIther that or I suppose it could check if the first child was a JSX Expression and strip out whatever's inside? Not sure if that leads to any further follow-on problems though.

[AlexGilleran]

(edited the comment above with a code fix and some other thoughts)

[mwiencek]

Ah, I see. I was sort of expecting it to desugar into something like {foo ? 'foo' : undefined}.

I did try it without the {} too, but it throws a Control statement must have a child! error, with a bare string.

Another problem with removing the {} is that I can't then use a function to return a string/array of elements/etc., which is my main use case.

[mwiencek]

e.g. we wrap all of our user-visible strings for gettext lookup/extraction, so the previous example is more accurately:

<If condition={foo}>
  {l('foo')}
</If>

[AlexGilleran]

Ah yeah I see how that makes sense.

You can work around it for now by wrapping it in <span> - I'll look into allowing {} expressions in the next release.

[mwiencek]

Wonderful, thanks! :)

[vkbansal]

I too am facing a similar issue. I've put span tags as work-around for now.
But ul > span > li does not make any sense.

[AlexGilleran]

Fixed by @texttechne in 3.0.0 :)