Eslint-plugin-react: Getting wrong error "Strings not allowed in JSX files" in prop

[iiison]

I'm getting error in this:

<div className={`col-12 grid input-cont ${shouldUseDefaultClasses && defaultContClass} ${contClass}`}>

The error is:

error  Strings not allowed in JSX files: “`col-12 grid input-cont ${shouldUseDefaultClasses && defaultContClass} ${contClass}`”  react/jsx-no-literals

There is no string in the className, not sure what am I missing here.

[ljharb]

This should definitely be fine since it's in an attribute.

[iiison]

not sure what's wrong. Here is my package versions:

| package | Version |
|----------------------|---------|
| babel-eslint | 10.0.1 |
| eslint | 5.12.1 |
| eslint-config-airbnb | 17.1.0 |
| eslint-loader | 2.1.1 |
| eslint-plugin-react | 7.12.4 |

[ljharb]

What's your eslint config?

[iiison]

Here is link to my eslint config file.

[ljharb]

k, looks like a legitimate bug

[iiison]

hmm, maybe today is my bad day, another strange thing is happening:

if I use:

    items = <li className='suggestions col-12 lighter-color'>{'No matching suggestion.'}</li>

I get error:

Curly braces are unnecessary here.

and I remove curly braces like this:

<li className='suggestions col-12 lighter-color'>'No matching suggestion.'</li>

I get error:

Strings not allowed in JSX files: "No matching suggestion"

[ljharb]

Well that's true - the "no literal" rule explicitly forbids string literals. (it's not in curly braces, so it's a string literal)

[iiison]

how do I fix it then.. can't keep the curly braces can't remove them either..

[ljharb]

We'll need a PR to this plugin to fix it.

[iiison]

can I create a PR..

[ljharb]

Absolutely!

[iiison]

@ljharb as you can see in my config file, I am using airbnb style guid too, and there the rule for jsx-no-literals is this:

'react/jsx-no-literals': ['off', { noStrings: true }],

and in my config file I've this rule:

'react/jsx-no-literals': 2

Everything works fine if I make noStrings to false in config. does that mean eslint doesn't overwrite the whole rule and I've to define write options too in order to truly overwrite the rule from plugin?

Not sure if it's a bug or kept it this way for a reason.

[iiison]

one more thing, should we have a little more details about the API and how the control flows in contributing file. LMK if I could be a help..

[ljharb]

Sure, a separate PR to improve CONTRIBUTING.md is always great.

As for noStrings; https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-literals.md says "Enforces no string literals used as children, wrapped or unwrapped." - that means it should only apply to children, not props, which seems like the bug.

[iiison]

oh, I see. I will look into it.

[iiison]

@ljharb I've created a pull request for the issue, but when I see in test file, it doesn't allow strings in props. I've updated the test in PR tho. Just wanted to make sure if we are on the same page.

[pawelnvk]

Is this something I could start working with? Or is it WIP?

[ljharb]

@pawelnvk #2146 already exists

[pawelnvk]

My mistake 😄 Thanks.

[jzabala]

@pawelnvk #2146 already exists

Should this issue be closed then?

[ljharb]

Yep, now that it's merged. Thanks!