react/jsx-curly-brace-presence "children" "always" complains about whitespace

[dwilt]

"eslint": "^4.18.2",
"eslint-plugin-react": "^7.6.1",

I have the prop: "react/jsx-curly-brace-presence":["error", { "props": "always", "children": "always" }], in my .eslintrc file because I'm trying to convert:

<div className="NameCapture_wrapper">
    <p className="NameCapture__question">
        What's your first name?
    </p>
    <NameCaptureNameInput/>
</div>

to:

<div className={`NameCapture_wrapper`}>
    <p className={`NameCapture__question`}>
        {`What's your first name?`}
    </p>
    <NameCaptureNameInput/>
</div>

but eslint is complaining about the whitespace:

  10:44  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  13:49  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  14:56  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  17:53  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  18:45  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence
  19:23  error  Need to wrap this literal in a JSX expression          react/jsx-curly-brace-presence

Below is what fixes it but I shouldn't have to put all of my JSX on one line right?

<div className={`NameCapture_wrapper`}><p className={`NameCapture__question`}>{`What's your first name?`}</p><NameCaptureNameInput/></div>

[ljharb]

The bug here is that the one liner fixes it; there’s no reason you need a literal inside curly braces there.

Why are you trying to convert a jsx string literal into a JS string literal with no interpolations?

[ljharb]

Actually the oneliner fixes it because it assumes that the whitespace surrounding the literal is significant, so that’s correct behavior, but the question still remains.

[dwilt]

@ljharb Thanks for the reply. I wanted to keep all strings inside of curly braces in our project for consistency purposes. That way, if we were to put a variable in (interpolation), we wouldn't need to go and add the backticks and curlys after -- I just really prefer the consistency. I also think it's clearer to read as you know it's a string.

[ljharb]

Consistency i buy - I’m not sure what else it’d be than a string, and you can add interpolations directly with jsx.

I think it’d be worth exploring some test cases in a PR to see what would break by adddressing this.

[dwilt]

@ljharb You're correct, it would only be a string.

I wasn't aware that you are able to have interpolations directly:

const test = `blah`;

<p className={`NameCapture__title`}>
    What's {test} your first name?
</p>

Thanks for your responses!

[tranhl]

Actually the oneliner fixes it because it assumes that the whitespace surrounding the literal is significant, so that’s correct behavior, but the question still remains.

To me this doesn't seem like correct behavior, at least from what I imagined the rule to enforce. I imagined that the rule would be indentation-aware, but it doesn't seem like this is the case.

<div className={`NameCapture_wrapper`}>
    <p className={`NameCapture__question`}>
        {`What's your first name?`}
    </p>
    <NameCaptureNameInput/>
</div>

Shouldn't the above JSX produce no warnings with the following rule?

...
"react/jsx-curly-brace-presence": ["error", { "props": "always", "children": "always" }]
...

[ljharb]

Yes, with “always” (a setting i have zero understanding of why anyone would want), I’d expect those to be correct.

[tranhl]

So this is a bug then. Is there anyone working on fixing this? If not, I can have a look into it.

[ljharb]

Please, go for it!

[tranhl]

Upon further inspection of the available rules, it appears that you can use jsx-no-literals to lint expression containers, which is a workaround for this bug.

For example, with these rules:

...
"react/jsx-curly-brace-presence": ["error", { "props": "always", "children": "never" }],
"react/jsx-no-literals": ["error", {"noStrings": false}],
...

... this will pass

<div className={`NameCapture_wrapper`}>
    <p className={`NameCapture__question`}>
        {`What's your first name?`}
    </p>
    <NameCaptureNameInput/>
</div>

... and this will invoke errors

<div className=`NameCapture_wrapper`> {/* Needs expression container */}
    <p className=`NameCapture__question`> {/* Needs expression container */}
        What's your first name? {/* Needs expression container */}
    </p>
    <NameCaptureNameInput/>
</div>

Perhaps we could extend the jsx-no-literals rule to implement prop linting as well and deprecate this rule?

[ljharb]

I think they're different enough that they should remain separate.

[rafbgarcia]

I have the same problem:

This throws Need to wrap this literal in a JSX expression error

<div className="pb_user_badge">
  <span>{'USER BADGE CONTENT'}</span>
</div>

But this doesn't

<div className="pb_user_badge"><span>{'USER BADGE CONTENT'}</span></div>

Adding "react/jsx-no-literals": ["error", {"noStrings": false}] didn't change anything for me.

@ljharb @tranhl do you have any suggestions to get around this?

[ljharb]

I would expect both to warn or not warn the same.