react/jsx-curly-brace-presence deleting {' '}

[mankittens]

The latest update to eslint-plugin-react says that {' '} violates react/jsx-curly-brace-presence. Running --fix will delete all instances of {' '}.

I don't believe this is appropriate, because in some cases, this is the only way to retain a regular space character between elements. Sure there is   and <span> </span>, but those aren't quite the same.

Thoughts?

[ljharb]

I believe this is fixed by #2431.

[mankittens]

Oh, awesome! I'll close this.

[uniqname]

I'm not sure #2431 does fix this. I've be wrestling with it most of the day with this and #2431 doesn't seem to address the following use-case:

<>
  foo{' '}
  <span>bar</span>
</>

#2437 attempts to address the above.

[daltones]

Unfortunately, even #2437 didn't fix all cases that used to be correct before v7.15.0.

<>
  {'foo '}
  <span>bar</span>
</>

warning  Curly braces are unnecessary here  react/jsx-curly-brace-presence

(it can be trailling whitespaces on both sides)

[ljharb]

@daltones why do you need that case? this:

<>
  foo
  <span>bar</span>
</>

is the same, because all whitespace including newlines collapses in HTML down to one space.

[daltones]

@ljharb yes, in HTML it would, not in JSX.

Your example results in foobar, not foo bar.

[ljharb]

in that case, please file a new issue for that and we'll get it fixed.

[taion]

ref #2454