Can't use JSXExpressionContainer as a child about jsx-control-statements HOT 8 CLOSED

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.

from jsx-control-statements.

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

from jsx-control-statements.

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.

from jsx-control-statements.

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>

from jsx-control-statements.

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.

from jsx-control-statements.

Wonderful, thanks! :)

from jsx-control-statements.

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.

from jsx-control-statements.

Fixed by @texttechne in 3.0.0 :)

from jsx-control-statements.